2 x 2 div - 响应

Question

有人可以帮助我，因为我真的厌倦了这一点。

我无法理解为什么每个col-xs-6中的图像重叠并在两侧留下空白区域。

我试图获得相同大小和响应的图像。

我做错了什么？

非常感谢任何帮助或建议

提前致谢

里斯

<div id="meettheband">
  <div class="row">
    <div class="col-xs-6 nobby">
      <img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" class="platforms">
    </div>
    <div class="col-xs-6 dave">
      <img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" class="platforms">
    </div>
  </div>
    <div class="row">
    <div class="col-xs-6 jammy">
      <img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" class="platforms">
    </div>
    <div class="col-xs-6 dozy">
      <img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" class="platforms">
      </div>
  </div>
</div>

#meettheband {

   width: 100%;
   height: auto;
}

.nobby {
  border: red solid;
}

.dave {
  border: red  solid;
}

.jammy {
  border: red  solid;
}

.dozy {
  border: red  solid;
}

img .platforms {
  max-width: 100%;
  max-height: auto;
}