child div not taking the whole dimensions - html

Question

I have a problem making a child div taking the whole width and height even if I make it 100% in width and height as shown in the code bellow
<div id="images_rows">
<div class="img_item"><div><span>Gone Fishing</span></div></div>
<div class="img_item"><div><span>By the sea</span></div></div>
<div class="img_item"><div><span>The great valley</span></div></div>
<div class="img_item"><div><span>A night to remember</span></div></div>
<div class="img_item"><div><span>On the lake</span></div></div>
<div class="img_item"><div><span>On the mountains</span></div></div>
<div class="img_item"><div><span>Take a flight</span></div></div>
<div class="img_item"><div><span>going to the forest</span></div></div>
</div>
The CSS is as the following :
div#images_rows {
font-size: 0;
}
div.img_item {
width: 25%;
min-width: 250px;
max-width: 799px;
margin:0;
height: 270px;
display: inline-block;
position: relative;
}
div.img_item > div {
width: 100%;
height: 100%;
display: table;
background-color: rgba(85, 85, 85, 0.5);
color: #fff;
font-family: lovelo;
text-align: center;
transition: 200ms cubic-bezier(0.15,0.75,0.5,1);
cursor: pointer;
}
div.img_item > div:hover {
background-color: rgba(85, 85, 85, 0);
background-size: 110%;
}
div.img_item > div > span {
display: table-cell;
vertical-align: middle;
font-size: 20px !important;
}
and this is the artifact I am having :
and this is the result in the browser as shown in inspect element:
That's the Parent div :
And this is the child div :
And as we can see there are some floating numbers because of percentage style of the parent div, and the child doesn't take the whole width the floating numbers which leaves a space not covered
Is there any ideas how this problem can be solved ?