Что может привести к перекрытию элементов блока HTML?

Question

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

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

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

Что может вызвать это перекрытие? Где я могу попытаться заставить contentsection оставаться строго ниже 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; 
    } 
} 

Answer 1

Я решил эту проблему, изменив свой nav.html файл из:

<nav class="navbar navbar-fixed-top"> 
(etc...) 
</nav> 

к:

<nav class="navbar navbar-static-top"> 
(etc...) 
</nav>