Container
Max-width content container with responsive horizontal padding.
Fixed Max-Width
Caps at a named breakpoint and stays there past it, regardless of how wide the viewport grows.
<div class="max-w-2xl mx-auto px-4">
...
</div>Fluid
No cap on width, just padding. Stretches to fill whatever parent it's placed in.
<div class="w-full px-4">
...
</div>Centered (mx-auto)
mx-auto centers the container — but only does anything once a max-width gives it room to be centered in.
Without mx-auto — hugs the left edge
With mx-auto — centered
<div class="max-w-md mx-auto px-4">
...
</div>Responsive Padding
Gutter grows at wider breakpoints. Shrink the panel to see the padding tighten back up on mobile.
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
...
</div>Bleed (Full-Width Child)
A child counteracts the container's own padding with matching negative margins, letting it bleed to the edges while siblings stay inset.
Regular inset paragraph text.
Back to regular inset text.
<div class="max-w-2xl mx-auto px-4">
<p>Inset text</p>
<div class="-mx-4">Full-bleed block</div>
<p>Inset text</p>
</div>Edge Cases
Nesting two containers shouldn't compound padding, and padding must hold even when the panel is narrower than any max-width breakpoint.
Nested container — inner has no extra px, avoiding doubled padding
Very narrow parent — padding still holds, no edge-to-edge content