CSS Макет - width и max-width

Использование width, max-width и margin: auto;

Как упоминалось в предыдущей главе, блочный элемент всегда занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно).

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

Примечание: Проблема с <div> выше происходит, когда окно браузера меньше ширины элемента. Затем браузер добавляет на страницу горизонтальную полосу прокрутки.

Использование вместо этого max-width улучшит работу браузера с небольшими окнами. Это важно при создании сайта, пригодного для использования на небольших устройствах (т.е. для адаптивности):

Совет: Измените размер окна браузера до ширины менее 500 пикселей, чтобы увидеть разницу между двумя div-ами!

Вот пример двух div-ов выше: