I am playing around with Bootstrap and I ran into a small problem that I can't find a solution for. There probably is a solution out there, but I can't, for the life of me, figure out what to search for.

What I want to know is, if there is a way to make the columns snap to each other, so a big gap doesn't show up like shown in the fiddle, below the first div on the left hand side. I hope the fiddle describes the problem well enough for someone to point me in the right direction.

![a big gap](https://i.stack.imgur.com/w3zMh.jpg)

Fiddle: <https://jsfiddle.net/DTcHh/24238/>

```css
body {
  background: tomato;
}
.container {
  background: white;
  border: 1px solid grey;
}
```

```html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200" />
      <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200" />
      <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200" />
      <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>
</div>
```