Content Width on Big Screens

Now the other end: big screens. Switch the preview to 1280 px. The page fills the whole width: the logo is at the very left, and the Donate button at the very right. On a monitor 1920 px wide, each card would be more than 400 px wide, and the steps' texts would run in long lines. The wider the screen, the further apart everything gets.

That's why the content of most websites has a maximum width and stays in the middle, while the backgrounds of the sections still run across the whole screen. You know both classes from the lesson Spacing and Sizing: max-w-* sets the maximum width, and mx-auto centers the element. For the content of a page, widths from max-w-5xl (64rem, 1024 px) to max-w-7xl (80rem, 1280 px) are common.

We don't put them on the sections themselves, because then their backgrounds would be narrow too. They go on the element inside each section that holds its content:

<section class="bg-white px-4 md:px-8">
	<div class="mx-auto max-w-5xl">...</div>
</section>

These classes don't need a prefix. A block element is as wide as its parent anyway, and max-w-5xl only keeps it from growing beyond 1024 px. On a narrow screen, it simply fills its parent, just as with max-width in the final project of the CSS course.

When all the content of a page has the same maximum width, its left and right edges line up, from the header down to the footer.