I’m attempting to have a header/body page with margins/padding that constrains the width of the header to the viewport width minus scrollbar, irrespective of how wide the content below it expands horizontally.

The scrollbars for this page should affect the header position just as if it were full-width, i.e. it should not be fixed in place, and the scrollbars should not be positioned on, or affect only, the content below.

The best I’ve managed to come up with so far is to set max-width: calc(100vw - 1.25rem) on the header element where 1.25rem is the spacing amount I wanted to apply. Of course, this then gets eaten into when the scrollbar appears, though it’s closer to the desired outcome than allowing the header to expand.