Why is the header not centered with body margin?

Question

Below, I fixed a header to the top, set width: 100% and applied a margin to the body element of margin: 10%. I expected the header to remain at 100% width of the viewport, but instead it now has a left margin but reaches to the end of the viewport on the right side.

            * {
                box-sizing: border-box;
            }
            
            
        
            header {
                position: fixed;
                background-color: #59b1ff;
                top: 0;
                height: 20px;
                width: 100%;
            }
            
            body {
                margin: 20%;
            }
            
            div {
                border: 1px solid grey;
            }

<header>Header</header>

<main>
<div>Div</div>
</main>

Why is the header not attached to the left viewport edge?

Answer 1

Why is the header not attached to the left viewport edge?

Because you did not specify where you want its left edge to be.

You basically left left at the default auto, so it takes the natural position this element would have in the flow if it wasn’t positioned, into account.

Add left: 0, and it will behave like you want it to.