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>
sleepz thewisperer is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2
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>
you can change the width of the .header
from 100%
to 100vw
The 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.
1