Layout
Container / Max-width
A container max-width is a rule that keeps content from growing wider than a set limit no matter how big the screen gets, so lines stay a readable length.
Content has a comfortable maximum width. Capping the line width no matter how large the screen gets prevents lines from growing so long that your eyes struggle to find the start of the next one.
Definition
A container max-width is a rule that keeps your content from growing wider than a set limit, no matter how big the screen gets. On a wide monitor, if body text stretches all the way to both edges, each line becomes so long that your eye struggles to find where the next line begins. Set an upper bound with max-width and the content holds a comfortable width even as the window grows, while the leftover space simply flows out to the sides as margin. Add auto to the left and right margins and the content centers itself on the screen. The key idea here is that filling the screen and being easy to read are two different goals.
Why does it matter?
People's eyes tire quickly when a line runs too long, because after reaching the end it gets hard to snap your gaze back to exactly where the next line starts. So capping the width of your body text noticeably improves both reading speed and focus. Skip that cap and you get a strange paradox: the bigger the screen, the worse the readability. Lock in a container width and your content keeps a consistent rhythm at any screen size, while the side margins add natural breathing room that makes the whole page feel composed. Especially now, when screens come in every size imaginable, this single rule of controlling your own width becomes the foundation of a stable layout.
Common mistakes
- Applying the same full-page width to body text as well. Backgrounds and headers can happily use the whole screen, but text meant to be read should always sit inside a narrower column. If you don't separate what each area actually needs, your writing becomes hard to read on large screens.
- Setting a max-width but forgetting the side padding. Even with the width capped, if the screen gets narrower than the container the text presses right against the edges and feels cramped, so add a bit of inner padding on both sides to keep things stable on any screen.
- Using a single fixed pixel value and ignoring how it behaves as the screen changes. On very small screens the viewport is narrower than your max-width, so you also need to make sure the width never spills past the screen itself.
Practical tips
- A single line of body text is easiest to read at roughly 45 to 75 characters, so a max-width around 640 to 760px (about 60 to 75ch) is a common choice. Reaching for ch, the character-width unit, is handy because the number of characters per line stays steady even when the font size changes.
- Decide on a few container sizes up front: a narrow one for body text and a wider one for headers or banners. That way you don't have to rethink the width every time, and the whole page keeps a consistent width rhythm.
- Set only the upper bound with max-width and leave the base width at 100%. Then large screens stop at the cap while small screens shrink to fit, responding naturally to many screen sizes with no extra handling.