Why are the distances different?

Issue

I have these codes in SCSS and HTML (Astro)

<header class="mainHeader">
        <a href="/"><img src="/images/mainLogo.png" alt="Логотип " id="headerLogo"></a>
        <div id="links">
                <a href="/products">Продукты</a>
                <a href="/sale">Акции</a>
                <a href="/contacts">Контакты</a>
        </div>
</header>

.mainHeader {
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;

    #links {
        margin-left: auto;
        margin-right: 10%;

        a {
            color: $green;
            text-decoration: none;

            font-family: 'Montserrat', sans-serif;
            font-weight: 550;
            font-size: 1.3rem;

            margin-right: 50px;

            &:last-of-type {
                margin-right: 0;
            }
        }
    }

    #headerLogo {
        position: relative;
        height: 3em;
        margin-top: 0.8em;
        margin-bottom: 0.7em;
        left: 10%;
    }
}

But distance between left side and image is MUCH smaller than distance between buttons and right side (I hope you can see image well).

Why does it happen and how do I fix it?

The distance is equal only if I make

...
    #headerLogo {
        position: relative;
        height: 3em;
        margin-top: 0.8em;
        margin-bottom: 0.7em;
        left: 75%; /* Changed from 10% to 75% */
    }

Solution

Found a way to do it! I made a div with links AND image, than moved margin-left and margin-right to it. Code:

.mainHeader {
    background-color: $white;

    #header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 10%;
        margin-left: 10%;

        #links {
            margin-left: auto;

            a {
                color: $green;
                text-decoration: none;

                font-family: 'Montserrat', sans-serif;
                font-weight: 550;
                font-size: 1.3rem;

                margin-right: 50px;

                &:last-of-type {
                    margin-right: 0;
                }
            }
        }

        #headerLogo {
            position: relative;
            height: 3em;
            margin-top: 0.8em;
            margin-bottom: 0.7em;

        }
    }
}

<header class="mainHeader">
        <div id="header">
                <a href="/"><img src="/images/mainLogo.png" alt="Логотип " id="headerLogo"></a>
                <div id="links">
                        <a href="/products">Продукты</a>
                        <a href="/sale">Акции</a>
                        <a href="/contacts">Контакты</a>
                </div>
        </div>
</header>

Answered By - jeany