title: Packery Grid Layout - Problems with border/padding and overlay
body: <p>I have been working on a grid layout using metafizzy isotope packery mode and have set up a codepen below to show you my issue.</p>
  
  <p><a href="http://codepen.io/anon/pen/EgKdpL" rel="nofollow">http://codepen.io/anon/pen/EgKdpL</a></p>
  
  <p>I am almost happy with my grid except for two issues.</p>
  
  <p>1 - I applied padding to the main grid selector class "griditem" which i would expect to apply a simply white edge around all grid items. However the results were mixed and some gaps are smaller/bigger than others. I have tried to produce the same thing with using CSS borders but had the same issue.</p>
  
  <pre><code>.grid-sizer,
  .grid-item {
     margin: 0!important;
     padding: 10px!important;
  }
  </code></pre>
  
  <p>2 - There is then a overlay on each grid item that reveals a title/heading, but due to the padding the overlay runs off is there a way to stop this happening?</p>
  
  <p><a href="http://codepen.io/anon/pen/EgKdpL" rel="nofollow">http://codepen.io/anon/pen/EgKdpL</a></p>
  
  <p>Appreciate any help.</p>
  
  <p>UPDATE</p>
  
  <p>Have applied the answers from below to the codepen, rollover state now fixed and fine. As you can see though uneven border/padding remains e.g. on first blue box.</p>