html - div のフローティング プロパティを削除しない限り、html ドキュメントの本文が div を超えて拡張されない

Question

css のメディア クエリを使用して、デバイスの幅に応じて各セクションを左にフロートさせることで、ページのレイアウトを 3 つのセクションに設定しようとしています。クロム開発者ツールを使用してページを検査しようとすると、私の体がセクションにまたがっていないことを確認できますが、そうすることに成功しました。メディア クエリからプロパティを削除するとfloat、body 要素は必要に応じてスパンされますが、すべてのセクションが望ましくないブロックにあるため、私のレイアウトは必要に応じて設計されません。動作の説明はありますか、または問題はどのように修正されますか? 以下は、ページhttps://jsfiddle.net/nma71c4w/の jsfiddle ページのリンクです。問題を解決していただきありがとうございます。

<div class="col-lg-4 col-md-6 col-sm-12">
    <section>
       <div class="hidden-element">
            <h2 ></h2>
        </div>

        <div class="title-element">
            <h2 > Chicken</h2>
        </div>
        <div>
            <p>
             my contents
            </p>
        </div>
    </section>
</div>

エラーの原因となっている css スタイルは、メディア クエリのようなものです。

@media (min-width: 992px){
        .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col- 
         lg-9, .col-lg-10, .col-lg-11, .col-lg-12{
            float: left;
                                   
        }
        ....
}