Как исправить адаптивный заголовок в html css? ⇐ CSS

[Anonymous]

У меня есть заголовок, который должен занимать всю ширину экрана. Однако когда я открываю элемент проверки в Google Chrome и уменьшаю ширину веб-страницы, цвет фона заголовка не покрывает весь заголовок.
Я пробовал изменить ширину, высоту и другие CSS. атрибуты, но я не могу понять, как это исправить.

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

body {
background-color: #e9c46a;
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-align: center;
}

.header {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #e76f51;
height: 100px;
width: 100%;
gap: 10px;
font-size: 30px;
text-align: center;
vertical-align: middle;
line-height: normal;
margin-bottom: 15px;
}

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

[img]assets/placeholderlogo.png[/img]

[url=home.html] Home [/url]
[url=catalog.html] Product catalog [/url]
[url=forms.html] Orders [/url]
[url=about.html] About us [/url]
[url=contacts.html] Contact us[/url]

 Help 
 Login 

Подробнее здесь: https://stackoverflow.com/questions/786 ... n-html-css