Here is the structure of my Bootstrap container:
<main >
<div class="row co-lg-12 col-md-12 col-xs-12">
<div class="col-lg-1 col-md-1 col-xs-1" style="background-color:red; height: 100vh;"></div>
<div class="col-lg-4 col-md-5 col-xs-0" style="background-color:blue; height: 100vh;">
</div>
<div class="col-lg-1 col-md-0 col-xs-0" style="background-color:green; height: 100vh;"> </div>
<div class="col-lg-3 col-md-4 col-xs-10" style="background-color:yellow; height: 100vh;">
</div>
<div class="col-lg-3 col-md-1 col-xs-1" style="background-color:gray; height: 100vh;"></div>
</div>
</main>
Upon inspection in the developer Tools, it appears that the blue container is taking up the entire screen instead of being 0px, and the red container is positioned below. Any insights on why this might be happening?
Appreciate your help!