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

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?

>Solution :

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>
....