Gap appearing when resizing image in browser

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;}