i want my image to align on the left but i have tried so many things but nothing is working. I am trying to build a topbar menu, when the width is 1100px the three images will disappear and hamburger.png will be shown. The hamburger picture is on the right side but i want it on the left side. I have tried position:absolute; top:0; left:0;, float:left; etc..

This is my code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />

<style>
    body {
        overflow-x: hidden;
    }

    .image1 {
        width: 138px;
        height: 92px;
        margin-top: 33px;
        margin-left: 24px;
        margin-right: 116px;
    }

    .image2 {
        width: 99px;
        height: 98px;
        margin-top: 35px;
        margin-left: 24px;
        margin-right: 81px;
    }

    .image3 {
        width: 79px;
        height: 90px;
        margin-top: 39px;
        margin-left: 25.7px;
        margin-right: 60px;
    }

    figcaption {
        font-size: 20px;
        font-weight: 800;
    }

    .text {
        text-decoration: none;
        color: black;
    }

    .text:hover {
        color: black;
        text-decoration: underline;
    }

    .close {
        display: none;
    }

    nav {
        display: flex;
        justify-content: space-between;
        float: left;
    }

    nav {
        position: absolute;
        right: 0;
    }

    nav .mainMenu {
        display: flex;
        list-style: none;
    }

    nav .mainMenu li a {
        display: inline-block;
        text-decoration: none;
        text-transform: uppercase;
    }

    nav .mainMenu li a:hover {
        text-decoration: underline;
    }

    nav .openMenu {
        font-size: 2rem;
        margin: 20px;
        display: none;
        cursor: pointer;
    }

    nav .mainMenu .closeMenu,
    .icons i {
        display: none;
        cursor: pointer;
    }

    nav .logo {
        margin: 6px;
        font-size: 25px;
        cursor: pointer;
    }

    @media(max-width: 1100px) {

        nav .mainMenu {
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: top 1s ease;
            display: none;
            background-color: white;
            width: 100%;
            height: 100%;
        }

        nav .mainMenu .closeMenu {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }

        nav .mainMenu .closeMenu i img {
            width: 45px;
            height: 31px;
            margin-top: 15px;
            margin-left: 16px;
        }

        nav .openMenu {
            display: block;
        }

        nav .mainMenu li a:hover {
            background: none;
            text-decoration: underline;
        }

        .line {
            border: 1px solid black;
            width: 40000px;
        }
    }

    @media screen and (max-width: 1430px) {

        .menu {
            display: none;
        }


        .hamburger {
            display: block;
            height: 31px;
            width: 45px;
            margin-top: 15px;
            margin-left: 16px;
            cursor: pointer;
        }
    }
</style>


<nav>

        <div class="openMenu"><i><img src="images/hamburger.png" alt="" class="hamburger" id="image"></i></div>
        <div class="text-center">
        <ul class="mainMenu">
            <li>
                <figure>
                    <img src="images/location.png" alt="" class="image1" />
                    <figcaption style="padding-right: 60px; padding-top: 8px;">
                        <a href="hours_location.php" class="text">Hours & Location</a>
                    </figcaption>
                </figure>
            </li>
            <div class="line"></div>
            <li>
                <figure>
                    <img src="images/how.png" alt="" class="image2" />
                    <figcaption style="padding-right: 30px">
                        <a href="how.php" class="text">How it works</a>
                    </figcaption>
                </figure>
            </li>
            <div class="line"></div>
            <li>
                <figure>
                    <img src="images/why.png" alt="" class="image3" />
                    <figcaption>
                        <a href="why.php" class="text">Why</a>
                    </figcaption>
                </figure>
            </li>
            <div class="closeMenu"><i><img src="images/close.png"></i></div>

        </ul>
    </div>
</nav>


<script>
    const mainMenu = document.querySelector('.mainMenu');
    const closeMenu = document.querySelector('.closeMenu');
    const openMenu = document.querySelector('.openMenu');

    openMenu.addEventListener('click', show);
    closeMenu.addEventListener('click', close);

    function show() {
        mainMenu.style.display = 'flex';
        mainMenu.style.top = '0';
    }

    function close() {
        mainMenu.style.top = '-100%';
    }
</script>

CodePudding user response：

Hello i made this change and it worked for me.

Update this line of code:

<div class="openMenu" style="width:100px;"><i><img src="images/hamburger.png" alt="" class="hamburger" id="image"></i></div>

And update this style code:

 .hamburger {
            display: block;
            height: 31px;
            width: 45px;
            margin-top: 15px;
            margin-left: -500px;
            cursor: pointer;
        }