缩小时如何使页眉占据整个宽度？

Question

When i zoom out the header doesn't take up the full-width of the page. I have two images the first is how it is supposed to look when zooming out and the second one is where it doesn't take up the full width.

Picture 1 :

Picture 2 :

I have tried with width:100% in the header, but it doesn't work.

    * {
    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%;}

Answer 1

Edit 1:- Change margin-left to 0px and margin-right to 0px. make max-width: 100%;.

html {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    background-color: #000;
    font-family: 'Lato', sans-serif;
    font-size: 62.5%;
    line-height: 1.2;
    color: #fff;
}

Edit -2 :- as far as i understood , your problem now is to set the other sections centered. follow this how to center things in css . If it sill doesn't solve the problem please edit the above fiddle accordingly and specify the requirements clearly (like using id's)

Edit -3:- Please follow the sample fiddle. fiddle