Container

Three widths

A page

up to 1280px, centred, 32px of side padding (16px on a phone)

A column of text

up to 68 characters (68ch), however wide the page

A form or a panel in a column

up to 460px

.page { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.prose { max-width: 68ch; }

The side padding belongs to the container, so a full-width band can sit outside it and still line up with the content above and below.

Parts answer to their container

A part that may sit in a sidebar, a dialog or a full page cannot know the width of the screen, so it asks the width of the space it is in. Mark the wrapper with container-type: inline-size and write the narrow rules as @container queries. Pages still answer to the viewport.

.card-wrap { container-type: inline-size; }
.card { display: grid; grid-template-columns: 1fr auto; gap: var(--tui-3); }
@container (max-width: 360px) { .card { grid-template-columns: 1fr; } }

Rules

• Centre the page with margin-inline: auto, not with a wrapper of a fixed width.
• Keep text to about 68 characters a line, even in a wide column.
• A container never scrolls sideways at 390px. If a child is wider, the child scrolls inside itself.
• Container queries for parts, media queries for the page.