Back to quality gates
container-bleed-separation
Container and Bleed Separation
Viewport-wide backgrounds and media extend independently while text, controls, and repeated panels remain aligned to the shared content grid.
Quality gatesRecommended
Intent
Prevent wide-screen whitespace, double-applied gutters, and misaligned sections caused by mixing viewport calculations with constrained child panels.
Checks
- Compare the computed x position and width of adjacent constrained sections at wide desktop, compact desktop, tablet, and mobile sizes.
- Verify full-bleed paint reaches the intended viewport edges while document scroll width remains equal to viewport width.
Warnings
- Using a viewport gutter formula inside an already centered max-width child applies the outside spacing twice.
Exceptions
- A deliberate offset or asymmetric editorial field is valid when its misalignment is specified and remains responsive.