Даже у опытных верстальщиков вёрстка иногда ведёт себя не так, как ожидалось — блок не встаёт на место, отступ появляется непонятно откуда, элемент вылезает за границы контейнера. Хорошая новость в том, что большинство таких проблем укладываются в небольшой список типичных причин.
Первым делом стоит открыть инструменты разработчика и посмотреть блочную модель выбранного элемента — часто оказывается, что путаница возникает из-за суммирования padding и border поверх заданной ширины, если box-sizing не установлен в border-box, о чём легко забыть в разгар работы.
Схлопывание внешних отступов по вертикали — ещё одна частая причина неожиданных расстояний между блоками, особенно у тех, кто только начинает разбираться в CSS. Расстояние между двумя соседними блоками не всегда равно сумме их margin, а может определяться по большему из двух значений.
Если элемент неожиданно исчез со страницы, стоит проверить, не выставлена ли у него или у родителя нулевая высота, overflow hidden при переполненном содержимом, либо display none где-то в унаследованных стилях. Панель стилей в инструментах разработчика обычно быстро показывает, какое именно правило сработало.
Проблемы с z-index и порядком наложения элементов часто связаны с тем, что z-index работает только у элементов с заданным position, отличным от static — если элемент остаётся static, значение z-index на нём попросту игнорируется браузером, что сбивает с толку, пока это не станет известно.
Полезная привычка при отладке — временно добавлять яркую рамку каждому подозрительному блоку через outline, не влияющий на раскладку в отличие от border. Это быстро показывает реальные границы элементов, которые иногда сильно отличаются от того, что казалось при взгляде только на содержимое.
Разбор частых причин неожиданного поведения вёрстки и способов их диагностики хорошо описан в разделе про отладку CSS на MDN.
