SCSS+Astro布局问题：Logo与导航两侧间距不等的原因及修复

我使用SCSS和HTML（Astro）编写了头部布局代码，但实际显示中Logo与页面左侧的间距远小于导航按钮与页面右侧的间距，只有将#headerLogo的left属性从10%改为75%时，两侧间距才相等。

HTML代码 #

<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>

SCSS代码 #

.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%;
    }
}

问题原因 #

• 相对定位left属性逻辑错误：position: relative下的left: 10%是让元素相对于自身原始位置向右偏移10%，不是相对于父容器左侧的距离。这导致Logo到左侧的实际间距并非你预期的父容器宽度的10%。
• 间距计算逻辑不统一：导航栏的margin-right: 10%是相对于父容器宽度计算的，和Logo的偏移逻辑完全不同，自然两侧间距不对等。
• 父容器对齐逻辑冲突：.mainHeader设置了justify-content: center，但又用margin-left: auto将导航栏推到右侧，再加上相对定位的偏移，整个布局的对齐规则混乱。

正确修复方案 #

方案一：用margin统一控制左右间距（推荐） #

移除Logo的相对定位和left属性，改用margin-left: 10%控制左侧间距，和导航栏的margin-right: 10%逻辑统一：

.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 {
        height: 3em;
        margin-top: 0.8em;
        margin-bottom: 0.7em;
        margin-left: 10%; /* 用margin-left替代left */
    }
}

方案二：父容器加内边距实现整体间距 #

给.mainHeader设置左右内边距，用justify-content: space-between让Logo和导航栏分别靠左右对齐：

.mainHeader {
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between; /* Logo左对齐，导航栏右对齐 */
    padding: 0 10%; /* 父容器左右内边距10% */

    #links {
        /* 移除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 {
        height: 3em;
        margin-top: 0.8em;
        margin-bottom: 0.7em;
        /* 移除position: relative、left和margin-left */
    }
}

内容的提问来源于stack exchange，提问作者jeany