Question posted in 
I have this header that should take up the whole width of the screen. However, when I open inspect element in Google Chrome and shrink the width of the webpage, the header’s background color does not cover the full header.
I tried changing the width, height and other css attributes, but I can’t seem to figure out how to fix it.
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;
}<div class='header'>
<img src='assets/placeholderlogo.png' class='logo'>
<a href='home.html' class='nav1'> Home </a>
<a href='catalog.html' class='nav1'> Product catalog </a>
<a href='forms.html' class='nav1'> Orders </a>
<a href='about.html' class='nav1'> About us </a>
<a href='contacts.html' class='nav1'> Contact us</a>
<button class='nav2'> Help </button>
<button class='nav2'> Login </button>
</div>
3
Answers
you can change the width of the
.headerfrom100%to100vwThe difference between using width: 100vw instead of width:100% is that while 100% will make the element fit all the space available, the viewport width has a specific measure, in this case the width of the available screen.
It is also good practice to use vw unit for everything (font sizes and heights) so that everything is displayed proportionally to the device’s screen width.
The issue arises because the content width of the header is larger than the screen size. To resolve this, you need to add the flex-wrap: wrap; property to your code.
If you mean the height of the background, change its
height: 100px;tomin-height: 100px;so it can expand vertically if there is content higher than 100px.