7 ms·
Seems to work properly in Firefox (https://i.imgur.com/AQ2M1G3.png https://i.imgur.com/AQ2M1G3.png) but breaks in Chrome (https://i.imgur.com/U2tVg2k.png); http
by Dragory 6y ago
Seems to work properly in Firefox (https://i.imgur.com/AQ2M1G3.png https://i.imgur.com/AQ2M1G3.png) but breaks in Chrome (https://i.imgur.com/U2tVg2k.png); https://i.imgur.com/U2tVg2k.png); Chrome doesn't accept the margin value (https://i.imgur.com/pH7X0ZO.png https://i.imgur.com/pH7X0ZO.png).
When the margin works, the logic makes sense. 50vw sets the padding of the side in question (e.g. left) to the middle of the screen, 50% subtracts half of the containing element's width (<body>) from it. Doing this for both left and right and then negating it with equal negative margins results in the content area in the header being centered and having the same width as body, but the padding stretching out to the edges of the window.