Цвет фона не заполняет всю ширину раздела при изменении размера экрана ⇐ CSS

[Anonymous]

Я пытался воссоздать заголовок Amazon, но столкнулся с проблемой: при изменении размера окна цвет фона моего заголовка не заполняет всю ширину экрана. я прикрепляю свои HTML и 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;
}

Код: Выделить всё

    






[i]



Delivering to XYZ 123456
[/i] Update location



All [i][/i]

[i]

[/i]



[i][/i]
EN
[i][/i]

language1
language2
language3



Hello, sign in

Accounts &  Lists[i][/i]

item1
item2
item3



Returns
& Orders

[i][/i] Cart

Вот заголовок в полноэкранном режиме]А вот заголовок, когда ширина окна около 700 пикселей

Подробнее здесь: https://stackoverflow.com/questions/785 ... the-screen