什么可能导致HTML块元素重叠？

Question

我基于Hot Towel模板启动了一个MVC4 SPA Web应用程序。我开始清理我不想要的页眉和页脚内容。我删除的其中一项内容是从app.css文件中为margin-top设置section.main到80px。我真的不希望标题占用这么多空间。但我对结果感到困惑。甚至在我删除之前，我根据Chrome浏览器窗口的宽度在标题中看到了一些奇怪的行为。现在我已经删除了它，我看到类似的奇怪“包装”行为，允许我的标题重叠我的内容。

当标题的宽度为979像素时，这就是我的屏幕：

由于我只是重新调整浏览器窗口的大小，在980像素处我越过一个阈值，导致内容在标题下滑动，如下所示：

什么可能导致这种重叠？我在哪里可以尝试使content section严格保持在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>