Ширина содержимого на больших экранах

Теперь другой конец шкалы: большие экраны. Переключите предпросмотр на 1280 px. Страница заполняет всю ширину: логотип прижат к самому левому краю, а кнопка «Пожертвовать» — к самому правому. На мониторе шириной 1920 px каждая карточка была бы шире 400 px, а тексты в шагах растянулись бы в длинные строки. Чем шире экран, тем дальше друг от друга всё разъезжается.

Поэтому у содержимого большинства сайтов есть максимальная ширина, и оно стоит посередине, а фоны разделов по-прежнему тянутся на весь экран. Оба нужных класса вы знаете по уроку «Отступы и размеры»: max-w-* задаёт максимальную ширину, а mx-auto центрирует элемент. Для содержимого страницы обычно берут ширины от max-w-5xl (64rem, 1024 px) до max-w-7xl (80rem, 1280 px).

На сами разделы их ставить не нужно, иначе и фоны у них стали бы узкими. Эти классы идут на элемент внутри каждого раздела, в котором лежит его содержимое:

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

Префикс этим классам не нужен. Блочный элемент и так шириной с родителя, а max-w-5xl только не даёт ему стать шире 1024 px. На узком экране он просто заполняет родителя, как и max-width в итоговом проекте курса CSS.

Когда у всего содержимого страницы одна и та же максимальная ширина, его левый и правый края выстраиваются в одну линию, от шапки до подвала.