屏幕缩放时Header背景色无法铺满全屏问题求助

我正在复刻亚马逊的Header组件，遇到一个响应式问题：调整窗口宽度时，Header的背景色无法填满整个屏幕宽度。附上代码和对应截图，恳请帮忙排查。

效果截图 #

• 全屏模式下的Header效果：
• 窗口宽度约700px时的Header效果：

HTML代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
    integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous">

<section class="header">

    <div class="left">

        <span class="logo">
            <img class="logo_img" src="amazon/logo.png" alt="Amazon.in" class="logo">
        </span>

        <div class="location">
            <p class="locationHead">Delivering to XYZ 123456</p>
            <p class="update"><i class="bi bi-geo-alt"></i> Update location</p>
        </div>

    </div>

    <div class="mid">
        

            <button class="categoriesButton">All <i class="bi bi-arrow-down-short"></i></button>

            <input type="text" class="searchBar" placeholder="Serch Amazon.in">

            <button class="searchButton"><i class="bi bi-search"></i></button>

        
    </div>

    <div class="right">

        <div class="language">
            <div class="languageSelect">
                <i class="bi bi-map"></i>
                <p>EN</p>
                <i class="bi bi-arrow-down-short"></i>
            </div>

            <div class="languageItems">
                <p>language1</p>
                <p>language2</p>
                <p>language3</p>
            </div>
        </div>

        <div class="signin">
            <span class="top">Hello, sign in</span>
            <div class="accountAction">
            <span class="bottom">Accounts & Lists<i class="bi bi-arrow-down-short"></i></span>
            </div>
            <div class="accountItems">
                <p>item1</p>
                <p>item2</p>
                <p>item3</p>
            </div>
        </div>

        <div class="orders">
            <span class="top">Returns</span>
            <span class="bottom">& Orders</span>
        </div>

        <div class="cart"><i class="bi bi-cart"></i>&nbsp;Cart</div>

    </div>

</section>

CSS代码 #

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.header{
    display: flex;
    align-items: center;
    background-color: rgb(84, 84, 84);
    height: 70px;
    width: 100%;
}
.left{
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo{
    padding: 0 12px;
}
.logo_img{
    width: 120px;
}

.location{
    white-space: nowrap;
    color: white;
    padding: 0 12px;
}

.locationHead{
    font-size: 14px;
}

.update{
    font-weight: bold;
}

.mid{
    width: 1100px;
    display: flex;
    max-width: 1057px;
}

.categoriesButton{
    background-color: lightgray;
    min-width: 55px;
    border: none;
    border-radius: 4px;
}

.searchBar{
    flex: 1;
    height: 41px;
    border: none;
    margin-left: -4px;
}
.searchBar::placeholder{
    padding: 0px 8px;
    font-size: 16px;
}

.searchButton{
    min-width: 45px;
    background-color: rgb(178, 157, 75);
    border: none;
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-right: 8px;
}
.right{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.language{
    color: white;
    margin-right: 8px;
}
.languageSelect{
    display: flex;
    align-items: center;
}
.languageSelect p{
    margin-left: 4px;
    font-weight: bold;
}

.languageItems{
    display: none;
}

.signin{
    color: white;
    margin-right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.top{
    font-size: 14px;
}
.bottom{
    font-weight: bold;
    white-space: nowrap;
    font-size: 16px;
}
.accountItems{
    display: none;
}

.orders{
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    margin-right: 8px;
}

.cart{
    white-space: nowrap;
    color: white;
    margin-right: 8px;
}

问题原因及解决方法 #

问题核心在.mid元素的固定宽度设置：你给.mid加了width: 1100px，当窗口宽度小于1100px时，这个元素会超出容器范围，导致整个Header出现横向滚动，而背景色仅填充可视区域宽度，看起来就像没铺满屏幕。

解决步骤：

1. 移除.mid的width: 1100px，保留max-width: 1057px，避免宽屏时中间区域无限拉伸；
2. 给.mid添加flex: 1，让它占据Header的剩余空间，自适应不同屏幕宽度；
3. 可选：给.mid加左右边距，避免内容贴边。

修改后的.mid样式：

.mid{
    flex: 1;
    display: flex;
    max-width: 1057px;
    margin: 0 8px;
}

另外，窄屏时左侧的location、右侧的语言选择等元素可能会拥挤，可添加媒体查询隐藏或调整：

@media (max-width: 768px) {
    .location {
        display: none;
    }
    .language {
        display: none;
    }
}

调整后Header背景色就能始终填满屏幕宽度，同时保证响应式布局的合理性。

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