I have been trying to have a grid layout with multiple images. I am trying to keep the margin spacing between images the same and keep the whole group centered into the middle of the page as the page resizes.

In order to keep the images separate I have put a margin of 20 px.
I put col-xx-xx to try to keep things centered but the content tends to shift to the left.

Here is the code:

```css
#fund {
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBIwOgafnZrnDssRi0czWu7VKvSLVjbwi2VYsIF3u0QBgGZbFSOw');
  height: 200px;
  width: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  margin:20px;
}

#fund h3{
  padding-bottom:80px;
}

#fund .btn {
  position: bottom;
}
```

```html
    <div class="container">
 <div class="row">
  <div class="platform">
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="fund">
       <h3>A Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="fund">
       <h3>B Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="fund">
       <h3>C Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm col-centered">Learn More</a></p>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="fund">
       <h3>D Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12" id="fund">
       <h3>E Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="fund">
       <h3>F Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="fund">
       <h3>G Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="fund">
       <h3>H Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-2 col-xs-8 col-xs-offset-2" id="fund">
       <h3>I Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-2 col-xs-8 col-xs-offset-2" id="fund">
       <h3>J Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-2 col-xs-8 col-xs-offset-2" id="fund">
       <h3>K Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
      <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-2 col-xs-8 col-xs-offset-2" id="fund">
       <h3>L Database</h3>
       <a href="#"></a>
       <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p>
      </div>
       </div>       
      </div>
   </div>
 </div>
</div>
```