Full-bleed

Full-bleed means an element runs edge to edge across the viewport, ignoring the centered container that everything else obeys. The name is borrowed from print, where an image is printed past the trim line so it 'bleeds' off the paper with no white border.

Use it for the moments that should feel bigger than the page: hero images, colored section bands, video backgrounds, wide tables or charts inside an article. The rest of the time, contrast is the point. Full-bleed only reads as expansive because the paragraphs around it are narrow. The common implementations are a grid with a named full-width track, or a child that escapes its parent with negative margins.

Gotcha: 'width: 100vw' counts the classic desktop scrollbar as part of the viewport, so the element overflows by roughly 15px and hands you a horizontal scroll on every page. Use the grid breakout above, a plain percentage width where the parent already spans the page, or subtract the scrollbar width explicitly. Swapping in a dynamic unit like '100dvw' does not help, because the problem is the scrollbar, not the browser chrome. Also keep readable text inside a max-width wrapper even when its background is full-bleed.