jquery - HTML ブロック要素が重なる原因は何ですか?

Question

ホット タオル テンプレートに基づいて MVC4 SPA Web アプリケーションを開始しました。不要なヘッダーとフッターを削除し始めました。margin-top削除したものの 1 つは、 forを に設定するファイル app.css からのものでし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;
    }
}