Container Width
The maximum width of content on a page, constraining layouts to optimal reading widths on wide screens.
Plain English
Container width prevents layouts from becoming uncomfortably wide on large monitors. Without it, a heading might stretch 1800px across a 4K screen — turning reading into a workout for the neck. Most design systems define 1–3 container widths for different contexts: a narrow one for article body text (~65ch), a standard one for page content (~1200px), and a wide one for data-dense dashboards (~1400px). The container is centred on the page with auto margins.
Technical
Implemented with max-width on a container element with margin: 0 auto for centering. Common Tailwind container classes: max-w-2xl (42rem), max-w-4xl (56rem), max-w-6xl (72rem), max-w-7xl (80rem). For typography, use max-width: 65ch (65 characters) — the ch unit is relative to the zero character width and produces optimal 60–75 character line lengths. Nested containers allow different sections to use different max-widths (e.g. a full-bleed hero with a narrower content block inside).
Live Demo
Container Width & Readability
max-w-xs — ~320px❌ Too narrowGood typography is invisible. The reader absorbs ideas without noticing the craft that made them readable. Line length is a key variable in achieving this.
Jerky reading, too many line breaks
max-w-prose — ~65ch✓ OptimalrecommendedGood typography is invisible. The reader absorbs ideas without noticing the craft that made them readable. Line length is a key variable in achieving this.
60–75 characters per line
max-w-none — full width❌ Too wideGood typography is invisible. The reader absorbs ideas without noticing the craft that made them readable. Line length is a key variable in achieving this.
Eye tracking fails at line-end
65 characters per line is the Goldilocks zone for readability.
Usage
✓ Good usage
Set max-width: 72rem on the page container and max-width: 65ch on article body text — wide content has room, prose stays at an optimal reading width.
✗ Bad usage
No max-width on a page layout — on a 2560px monitor, the content stretches horizontally, making lines 200 characters wide and impossible to read.
Recommended values
- Body copy: max-width: 65ch (approximately 600–700px at 16px)
- Standard page content: max-width: 1200px (75rem)
- Wide dashboard: max-width: 1440px (90rem)
- Narrow form: max-width: 480px
- Always: margin: 0 auto + padding: 0 16px (mobile gutter)
Common mistakes
- No container at all — content stretches infinitely on wide screens.
- Too-narrow container on a data dashboard — forces horizontal scrolling.
- Forgetting horizontal padding on mobile — content touches screen edges.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use max-width: 72rem with margin: 0 auto + padding: 0 1.5rem for the main page container. Constrain article body copy to max-width: 65ch. Forms: max-width: 480px. All containers centred.