title: Centering inside class CSS
body: <p>I am trying to center my tiny boxes inside the bright green box.</p>
  
  <p>When I'm not zoomed in:</p>
  
  <p><img src="https://i.stack.imgur.com/Iaehn.png" alt="enter image description here"></p>
  
  <p>When I zoom in, with the magic of Masonry, boxes realign. However, they are not centered in the middle. I would like be able to center these boxes. </p>
  
  <p>Not centered and zoomed in:</p>
  
  <p><img src="https://i.stack.imgur.com/MDwyL.png" alt="enter image description here"></p>
  
  <p>Here is a link to my codepen:</p>
  
  <p><a href="http://codepen.io/anon/pen/Cpedg" rel="nofollow noreferrer">http://codepen.io/anon/pen/Cpedg</a></p>
  
  <p>However, the centering is perfect in codepen but on my browser, the boxes look like the pictures above. Perhaps google chrome/browser issue? I tried putting <code>margin: 0 auto;</code> in different classes of my CSS but none seem to do the trick. =/</p>