My goal is to create a page layout with three sections, each floated left based on the device width using media queries in my CSS. I have successfully achieved this, but when I inspect the page using Chrome Developer Tools, I notice that the body is not spanning across the sections. Removing the float property from the media queries causes the body element to span as desired, but then the layout is not designed as intended since all sections are in a block format. Can anyone explain this behavior or provide a solution to correct the issue? Here is a link to the JSFiddle page: https://jsfiddle.net/nma71c4w/. I appreciate any help with this problem.
<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>
The issue seems to be related to the CSS styles within the media queries like:
@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;
}
....
}