title: Center two divs floated left inside parent container
body: <p>I have been trying to solve this for hours now with no luck. I am trying to center a Wordpress masonry style gallery and I can not for the life of me get it to work. I have looked all over the internet trying to find out how to do it with no luck. I basically want the images to be centered inside the parent container let's say the parent container is 1000px wide and the entire gallery is just 300px wide. Instead of it being left aligned I want it perfectly in the center.</p>
  
  <p>There are several nested div's and I have tried to apply <code>inline-block</code> to them and then <code>text-align: center</code> the parent div along with several other combinations. I have given up and would like someone to tell me where I am going wrong.</p>
  
  <p>I have included a <a href="https://jsfiddle.net/f8aLrLac/3/" rel="nofollow">fiddle</a> and the source code below. Also if it helps here is the theme and the gallery I am using. <a href="http://themes.goodlayers2.com/simplearticle/gallery-shortcode/" rel="nofollow">Simple Article Theme</a> Thanks for any help.</p>
  
  <pre><code>&lt;div class="main-container"&gt;
      &lt;div class="gdlr-shortcode-wrapper"&gt;
          &lt;div class="gdlr-gallery-grid gdlr-item"&gt;
          &lt;div class="gdlr-gallery-grid-container"&gt;
              &lt;div class="gallery-grid-first"&gt;
                  &lt;div class="gallery-grid-first-inner"&gt; &lt;a href="#"&gt;
                      &lt;img src="http://placekitten.com/240/300"&gt;
                  &lt;/a&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="gallery-grid-second"&gt;
                  &lt;div class="gallery-grid-second-inner"&gt; &lt;a href="#"&gt;
                      &lt;img src="http://placekitten.com/240/302"&gt;
                  &lt;/a&gt;
  
                  &lt;/div&gt;
                  &lt;div class="gallery-grid-second-inner"&gt; &lt;a href="#"&gt;
                      &lt;img src="http://placekitten.com/242/305"&gt;
                  &lt;/a&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
                  &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.main-container {
      width: 100%;
      text-align: center;
      margin: 0 auto;
  }
  
  .gdlr-shortcode-wrapper {
      margin-left: -15px;
      margin-right: -15px;
  }
  .gdlr-gallery-grid.gdlr-item {
      margin: 0px 13px;
  }
  .gdlr-gallery-grid.gdlr-item .gallery-grid-first {
      width: 33.33%;
      float: left;
      display: inline-block;
  }
  .gdlr-gallery-grid.gdlr-item .gallery-grid-first-inner {
      margin: 0px 2px 4px;
  }
  .gdlr-gallery-grid.gdlr-item .gdlr-gallery-grid-container img {
      display: block;
  }
  .gdlr-gallery-grid.gdlr-item .gallery-grid-second-inner {
      margin: 0px 2px 4px;
  }
  .gdlr-gallery-grid.gdlr-item .gallery-grid-second {
      width: 33.33%;
      float: left;
      display: inline-block;
  }
  a img {
      vertical-align: middle;
  }
  </code></pre>