⚡ Quick Fix (TL;DR)

The Culprit: A section inherits its parent container's max-width, so it can't reach the real viewport edges on its own, however wide the parent lets it grow.

The Fix: This exact technique is also the confirmed cause of a real horizontal-scrollbar bug on pages that don't account for it – the negative margins can make the element measure slightly wider than the true viewport. Pairing this with body { overflow-x: hidden; } is often necessary (see "Prevent Horizontal Scrolling"), and applying it once to a single top-level wrapper – rather than separately per section – avoids a related centering bug (see "Wrap a Whole Page Once for Full-Bleed, Not Per-Section").

.full-width-breakout {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}