Thiết kế website giá rẻ

Question

I was trying to recreate amazon header but i am facing a issue when the window is being resized, background color of my header is not filling up the entire width of the screen. i am attaching my html and css, can someone let me know what i am doing wrong.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon.in</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
        integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous">
    <link rel="stylesheet" href="amazon.css">
</head>

<body>
    <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> Cart</div>

        </div>

    </section>
</body>

</html>

*{
    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;
}

Here is the header in full window mode]And here is the header when the window width is around 700px

Thiết kế website giá rẻ

Danh mục

Background color is not filling the entire width of the section when the screen is resized