Ширина блока, который должен быд бы вроде бы растягиваться на всю ширину окна.
Ну вот хотя бы простой пример - ниже на картинке блок сверху должен располагаться на всю ширину окна, а у него появляется справа отступ (от куда-то):
Часто такое происходит на небольших экранах (смартфонах и т.д.). Проблема изначально в том, что надо разобраться в следующих минимальных параметрах css:
1. margin
2. padding
3. width
4. height
5. max-width
И далее вуже не будет кривых отображений.
Начнем нашу шпаргалку с width. Надо понимать что означает width:100% например. Иногда вы думаете, что сделав width:100% ваш блок будет ровно по ширине окна браузера, но это не так.
Лучше всегда начинать сначала (как ни странно), а именно с html,body. Им логично выставить:
width:100%;
height:100%;
margin:0;
padding:0;
чтобы расположить их гарантированно по всему экрану.
Далее начинаем добавлять внутрь body блоки и вдруг один блок оказывается по ширине больше нашего окна, что делать он раздвигает рамки окна (как бы), и одновременно (как бы) сужает ранее отрисованные блоки и получается фигня как на рисунке.
Попробуем думать как разработчики браузера - при отрисовке: принцип таков наверное, что отрисовывать каждый блок браузер должен один раз, идем последовательно. Вот и получается эффект как на картинке выше.
Ширина
Чтобы решить проблему ширины блоков браузеру надо как-то сказать языком css, чтобы он вписывал внутренний блок в уже имеющуюся ширину окна.
Так вот похоже первый способ это указать margin:0; Он говорит (похоже) однозначно браузеру, что наш блок должен пррилипнуть по ширине слева и справа к родительсткому блоку (а родитель у нас width:100%). Но внимание - ему нальзя одновременно указывать также width:100% ибо его ширина 100% может оказаться к примеру больше родителя.
Не подумайте ,что мы тут открываем новые возможности, но просто задолбало постоянно вспоминать что от чего зависит, поэтому продолжаем в стиле небольшой шпаргалки.
Еще можно потомку указать max-width:95%; (и еще можно одновременно max-width:35em;) и это тоже поможет.
Да и конечно блоку надо предусмотреть overflow по ширине, чтобы он опять же не сжимал изображение по ширине всего окна. Или еще как вариант полезно использовать wrap механизм для цепочки блоков расположенных по горизотале, чтобы они при уменьшении ширины экрана перескакивали вниз по экрану.
То есть главный вывод всего выше сказанного - надло думать как браузер, то есть идем с body внутрь и следим за шириной родителя - не даем потомку сделать ширину ее больше родителя. И тогда наверняка у вас будет правильный header и footer - точно по краям окна.
Высота
Все выше сказанное актуально и для высоты блоков и высоты всего окна. Но в отличии от ширины при высоте скроллинг происходит автоматически браузером и тут очевидно все проще.
box-sizing
Небольшое, но все-таки оказывает влимяние параметр box-sizing. Его значение влияет на вычисление размера блока. А тменно лучше ставить всем блокам box-sizing: border-box; и тогда размер блока всегда будет с размером border и padding.
.....
