Обычно, чтобы систематизировать эти ограничения и вынести их за скобки, используется обёртка.

Есть два подхода:

У каждого способа есть свои плюсы и минусы:

Контейнер‑обёртка подойдёт для случаев, когда структура содержимого страницы всегда одинаковая, например для статьи в блоге. Либо наоборот — в случаях, когда вы не знаете заранее, что будет на странице, поэтому нужно перестраховаться и задать базовые ограничения. То есть такую обёртку лучше использовать в шаблонах страниц с динамическим содержимым.

Для страниц, структура которых зафиксирована и понятна, выгоднее использовать глобальный класс‑обёртку. Пример — простая статичная промостраница с конкретными этажами и содержимым.

На самом деле второй вариант технологичнее, потому что, какой бы сложной ни была динамическая страница, в её основе всё равно будет шаблон, а значит, в нём можно использовать класс‑обёртку.

Перейдём к практике. Я добавил два этажа и подвал к нашему меню из предыдущих советов. Теперь это больше похоже на полноценную страницу:

У нас статичная страница с понятными этажами. Значит, будем использовать класс‑обёртку.

Для начала подумаем, какие ограничения стоит задать. Чтобы на узком окне содержимое страницы не упиралось в края, нужно добавить минимальный несжимаемый отступ слева и справа. При этом у нас есть этаж с изображением, который, наоборот, должен касаться краёв окна. Добавим по тридцать пикселей слева и справа:

Кроме этого, нужно ограничить максимальную и минимальную ширины содержимого. Допустим, максимальная — 1200 пикселей, а минимальная пусть будет 800 пикселей:

Таким образом мы вынесли стили, отвечающие за ширину и боковые отступы страницы, за скобки и теперь можем добавить класс wrapper любому этажу, чтобы он подчинялся общим правилам:

Результат целиком можно посмотреть в Кодсэндбоксе.

Если заглянуть в исходный код сайта бюро, можно увидеть ту же картину: практически каждому этажу назначен класс holder, отвечающий за отступы от краёв окна.