Fixing full-bleed CSS

I’m a front-end developer not a medical practitioner. If you’re bleeding IRL visit the hospital and stop googling medical issues!The full-bleed layout — as described there by Josh Comeau — can be done with CSS grid (and subgrid). Sometimes you can’t grid the entire page.That’s where Andy Bell’s utility class is useful..full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }But it ain’t perfect. The issue is that viewport units don’t solve the classic scrollbar problem. If you’re on macOS or a fancy OS that has fancy scrollbars, test on Windows! 100vw can be wider than the viewport. Because why would browsers do anything sensible?It’s hard to see in Andy’s CodePen but a few pixels can be cropped either side. Add something like a border or shadow and it’s easier to see..full-bleed { box-shadow: inset 0 0 0 10px yellow; }Ignore the pink border that’s my blog style.This is not always a problem but it can lead to subtle alignment issues. By the way, macOS has a scrollbar setting “Show…