When I try to zoom out, the header does not extend to the full width of the page. I have included two images for reference - the first image shows how it should look when zooming out, while the second one depicts the issue where the header does not occupy the entire width.
Picture 1 :
https://i.sstatic.net/N9b5Q.png
Picture 2 :
https://i.sstatic.net/khx4r.png
I attempted using width:100% in the header, but unfortunately, it did not produce the desired result.
* {
padding: 0;
margin: 0;
box-sizing: border-box;}
html {
width: 100%;
max-width: 1600px;
margin-left: auto;
margin-right: auto;
background-color: #000;
font-family: 'Lato', sans-serif;
font-size: 62.5%;
line-height: 1.2;
color: #fff;}
header {
background-color: var(--background-color);
width:100%;}