Мы сверстали основное содержимое страницы, теперь настала очередь подвала.

У подвала есть фон, который тянется на всю ширину страницы. Но содержимое при этом должно занимать лишь часть страницы и располагаться по центру.

Чтобы отцентровать содержимое, но не затронуть фон подвала, придётся немного доработать разметку. Заключим всё содержимое подвала в дополнительный контейнер-обёртку, после чего выровняем его по центру.

Используем для обёртки тег <div>. Он не имеет семантического значения, поэтому идеально подходит для декоративных эффектов. Обычно для обёрток используют класс container или wrapper.

Чтобы отцентровать содержимое, зададим обёртке ширину и добавим автоматические внешние отступы справа и слева. Используем для отступов краткую запись:

margin: 0 auto;

Если указать для margin два значения, то первое применится к внешним отступам по вертикали, а второе — к внешним отступам по горизонтали. Вот так выглядит аналогичная полная запись:

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

Краткую запись с двумя значениями часто используют, когда требуется отцентровать элемент. Однако в других ситуациях лучше к ней не прибегать, так как это ухудшает читаемость кода.

Итак, добавим в разметку контейнер-обёртку, после чего зададим ему ширину и внешние отступы.