Container / max-width wrapper
The centered box that caps how wide content can stretch, so a giant monitor doesn't turn every paragraph into one endless line.
See it
What it is
A container is a centered box with a maximum width and a bit of side padding. Content lives inside it, so on a 27-inch monitor the page stops growing at a sane width instead of smearing one line of text across three feet of glass. The whole pattern is usually three declarations: a max-width, 'margin-inline: auto', and horizontal padding.
Pick the number by content, not by monitor. Marketing pages settle around 1200 to 1280px, app shells go wider, and a prose column wants far less (see content width). The side padding matters as much as the cap: without it, text kisses the screen edge the moment the viewport is narrower than the max-width.
Gotcha: containers nest badly. Wrap a container inside another container and you get doubled padding and a mysteriously skinny column. Decide one level owns it, usually the section. The other classic pain is the full-bleed child: a background band or hero image that needs to escape the wrapper, which is why many layouts put the container inside each section rather than around the whole page.
Ask AI for it
Wrap each page section's content in a centered container: max-width 1200px, margin-inline auto, and horizontal padding of 24px on desktop and 16px on mobile. Apply the container inside each section rather than around the whole page, so section backgrounds still run full width edge to edge. Do not nest one container inside another.