Странная зависимость

Общее
1

Добрый день!
Прошу помощи. При верстке первого учебного макета обнаружилась странная зависимость. Макет похож по структуре на макет из учебного курса про сайт Кексби, то есть там тоже используется центрирующий контейнер. Но у меня происходит странное смещение второго diva верхнего уровня с большой фоновой картинкой, если у контейнера в явном виде не прописана рамка:
.container {
margin: 0 auto;
width: 1140px;
border: 1px solid red;}

Не могу понять какая тут связь.

Ссылка на html и css https://codepen.io/prisedaka/pen/EopqKp (там без картинок)
Ссылка на исходники: https://yadi.sk/d/JJAo582o3RUhyV

2

Сделайте еще скрин с отображением проблемы, пожалуйста. По словесному описанию сложно понять, какое смещение должно быть видно.

3

Вот так, если у контейнера нет границы

image
image.jpg824×678 80.8 KB

Вот так, если есть граница

image
image.jpg750×522 68.7 KB

4

Внешний отступ h1 выпал. Попробуйте заменить на padding-top такой же величины.

5

Спасибо, помогло. А физический смысл получается какой? У заголовков внешние отступы сверху будут выпадать, если нет явной границы блока? или есть другое объяснение?

6

Это обычное поведение для стандартной блочной модели. Перечитайте теорию (пройдите курс, если пропустили) в курсе “Блочная модель документа”.

7

Спасибо за наводку. Действительно, там это рассматривалось