can not make the background makes the 100% height in responsive - html

Question

I have html code like this
<div class="container-fluid" style="height:calc(100vh - 120px)">
<div class="row h-100" style="margin-top:20px;">
<div class="col-lg-10 col-md-12 col-xs-12 h-100 div-border-shadow mx-auto " >
<div class="row mt-3">
<div class="col-lg-10 col-md-12 col-sm-12 text-center mx-auto">
<div id="gallery" class="clearfix">
#for (int i =0; i<8 ; i++)
{
<div class="gallery-div-format d-inline-block" style="width:200px; height:200px; background-color:red">
</div>
}
</div>
</div>
</div>
</div>
</div>
</div>
it makes a page like this
this is the css
.div-border-shadow {
width: 100%;
border: 1px solid #e2efef;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.29);
position: relative;
background: #fff;
border-radius: 10px;
margin-bottom: 15px;
}
.gallery-div-format {
margin-left: 10px;
margin-right: 10px;
border-radius: 10px;
box-shadow: 0 5px 5px 3px rgba(0,0,0,0.4);
}
but for checking the page being responsive(when I make the browser smaller) it becomes like this
as you can see the white background would not extend, I want the white background extends as long as the red box is repeating. which part of my code is wrong?

Answer 1

if you remove h-100 class from below tag it display correctly:
...
<div class="col-lg-10 col-md-12 col-xs-12 h-100 div-border-shadow mx-auto ">
...
</div>
....