Name One Page Container

A reusable max-width + centering + side-padding class is the bridge from single rules to a whole page architecture.

Define once

.section-container { max-width: var(--max-width); margin-inline: auto; padding: 5rem 1rem; }

Use a token for the width so the container and later breakpoints share one source of truth.

Live container

Constrained content

This block is capped at var(--max-width), centered, and padded on the sides. Resize the window — the edges keep breathing room.

Without this primitive, every section invents its own max-width.

Important CSS

:root { --max-width: 72rem; }

.section-container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 5rem 1rem;
}