Float elements are typically meant to be displayed side by side in a row. However, in certain cases where float elements need to be pushed below others, it can result in whitespace. An example of this structure is:
<div class="row clearfix">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
When the following CSS is considered:
@media screen and (max-width: 991px) {
.col {
width: 50%;
}
}
In this scenario (screen < 992px), extra space will be present:
I want to eliminate this additional gap without altering the HTML structure. How can I achieve this?