Что может вызвать наложение элементов блока HTML?

Я начал веб-приложение MVC4 SPA на основе шаблона Hot Towel. Я начал чистить верхний и нижний колонтитулы, которые мне не нужны. Одна из вещей, которые я удалил, была из файла app.css, который устанавливает margin-top для section.main до 80px. Я действительно не хочу, чтобы заголовок занимал столько места. Но я смущен результатом. Еще до того, как я удалил это, я увидел какое-то странное поведение в заголовке, основанное на ширине окна браузера Chrome. Теперь, когда я удалил это, я вижу подобное нечетное поведение "wrapping", которое позволяет моему заголовку перекрывать мой контент.

Вот как выглядит мой экран, когда ширина заголовка составляет 979 пикселей:

Поскольку я просто изменяю размер окна браузера, на 980 пикселей я пересекаю порог, который заставляет контент скользить под заголовком следующим образом:

Что может вызвать это перекрытие? Где я могу попытаться сделать section content строго под header? Я не вижу никаких стилей float применяемых к элементам.

Самое странное, что, хотя размер header равен 0, элемент nav он содержит, явно остается видимым с правильным размером. Как контейнер может быть меньше его содержимого?

Я нашел это в app.css, который может быть связан:

@media only screen and (max-width: 979px) {
    .page-splash-message {
        font-size: 150%;
    }

    .navbar-fixed-bottom {
        position: fixed;
    }

    footer span {
        padding: 10px 50px;
        font-size: 14px;
    }
}