Gap appearing when resizing image in browser - html

Question

I have a small section in the mobile version of my website with 50-50 image/text format which looks and functions as I want, but when I resize the browser a small gap appears at the bottom of the images.
I have tried everything but cannot figure out the issue (I am sure it is something minor I am staring right at). Closest I came was vertical-align: bottom; to the image but the gap just started appearing at the top instead.
.mobilecontainer1 {
display: block;
width: 100%;
float: left;
box-sizing: border-box;
}
.mobilebox {
float: left;
width: 50%;
overflow: hidden;
line-height: 0;
}
.mobilebox img {
width: 100%;
}
.mobiletextwrap {
padding-top: 19%;
}
#mobilebox1 {
background: black;
color: white;
}
#mobilebox2 {
background-color: white;
color: black;
}
#mobilebox3 {
background-color: black;
color: white;
}
.mobileboxwrap {
width: 100%;
float: left;
display: block;
}
#mobileboxwrap1 {
background: black;
color: white;
height: 100%;
overflow: hidden;
}
#mobileboxwrap2 {
background: white;
color: black;
height: 100%;
overflow: hidden;
}
#mobileboxwrap3 {
background: black;
color: white;
height: 100%;
overflow: hidden;
}
<div class="mobileboxwrap" id="mobileboxwrap1">
<div class="mobilebox">
<img src="img/mobilebackground_3.png">
</div>
<div class="mobilebox" id="mobilebox1">
<div class="mobiletextwrap">
<header>
<h2>Info</h2>
</header>
</div>
</div>
</div>
<div class="mobileboxwrap" id="mobileboxwrap2">
<div class="mobilebox" id="mobilebox2">
<div class="mobiletextwrap">
<header>
<h2>Drinks</h2>
</header>
</div>
</div>
<div class="mobilebox">
<img src="img/mobilebackground_2.png">
</div>
</div>
<div class="mobileboxwrap" id="mobileboxwrap3">
<div class="mobilebox">
<img src="img/mobilebackground_1.png">
</div>
<div class="mobilebox" id="mobilebox3">
<div class="mobiletextwrap">
<header>
<h2>Music</h2>
</header>
</div>
</div>

Answer 1

Just set the display: block for the img
.mobilebox img { width: 100%; display: block;}