Full-bleed Divider

A horizontal rule that escapes content padding and stretches edge-to-edge across the viewport: .hubRule. It uses width: 100vw; margin-left: 50%; transform: translateX(-50%) under the hood; the parent wrapper's overflow-x: clip prevents horizontal scroll and broken sticky sidebars. (The demo below approximates the effect with negative margins scoped to the demo box.)

A rule that reaches beyond padding

Content stays within padding; only the divider bleeds to the box edge. In the hub, that edge is the viewport boundary.

Content above — inside box padding.


Content below — divider extends to the box edge.

Rules

Overflow guard

The parent must have overflow-x: clip — it absorbs the extra width introduced by 100vw. Using clip (not hidden) keeps sticky sidebars intact.

Never

No fill or shadow on the divider itself — a 1px hairline only.