Design AtlasBody text is usually capped at 60–75 characters (roughly 600–700px) for readability. But trapping an image in that same narrow column can feel cramped. Full bleed keeps the text width unchanged and only widens the image to the viewport edges, creating rhythm.
The cleanest build: make the parent display: grid; grid-template-columns: 1fr min(680px, 90%) 1fr, put body text in the middle column, and give the full-bleed image grid-column: 1 / -1 so it spans both outer columns. The older margin-left: calc(-50vw + 50%) trick works too but can be thrown off slightly by scrollbar width.
The same technique applies to pull quotes and colored section backgrounds, not just images — the point is alternating a narrow text rhythm with a wide visual moment, giving the scroll some dynamics.
When to use
Use it when a long read — a blog post, an article — needs a visual breath between text blocks. It doesn't fit functional app screens where the margin itself does work, like touch targets.