title: Layouts get additional border
body: <p>I'm trying to get a full width image / photo gallery with isotope. My problem is that Isotope adds some additional pixels around each image when it's loaded for the first time, so there is a black border around each image. When I resize my window the borders disappear and when I resize it back to full screen it's also showing without borders. </p>
  
  <p>I just want to get the images side by side without any kind of border, but everything I try isn't working.</p>
  
  <p>You can see it running here: <a href="http://www.martijnbastiaansen.nl/testing/" rel="nofollow">link</a></p>
  
  <p>html code:</p>
  
  <pre><code>&lt;div class="isotope"&gt;
      &lt;div class="item"&gt;&lt;img src="http://lorempixel.com/output/city-q-c-200-200-4.jpg" width="200" height="200" alt="stad"/&gt;&lt;/div&gt;
      &lt;div class="item med"&gt;&lt;img src="http://lorempixel.com/output/animals-q-c-200-200-5.jpg" width="200" height="200" alt="beest"/&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="http://lorempixel.com/output/city-q-c-200-200-5.jpg" width="200" height="200" alt="stad"/&gt;&lt;/div&gt;
      &lt;div class="item large"&gt;&lt;img src="http://lorempixel.com/output/animals-q-c-400-400-6.jpg" width="400" height="400" alt="beest"/&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="http://lorempixel.com/output/animals-q-c-200-200-4.jpg" width="200" height="200" alt="beest"/&gt;&lt;/div&gt;
      &lt;div class="item med"&gt;&lt;img src="http://lorempixel.com/output/city-q-c-200-200-10.jpg" width="200" height="200" alt="stad"/&gt;&lt;/div&gt;
      &lt;div class="item large"&gt;&lt;img src="http://lorempixel.com/output/animals-q-c-400-400-7.jpg" width="400" height="400" alt="beest"/&gt;&lt;/div&gt;
      &lt;div class="item med"&gt;&lt;img src="http://lorempixel.com/output/city-q-c-200-200-9.jpg" width="200" height="200" alt="stad"/&gt;&lt;/div&gt;
      &lt;div class="item med"&gt;&lt;img src="http://lorempixel.com/output/animals-q-c-200-200-2.jpg" width="200" height="200" alt="beest"/&gt;&lt;/div&gt;
      &lt;div class="item large"&gt;&lt;img src="http://lorempixel.com/output/city-q-c-400-400-8.jpg" width="400" height="400" alt="stad"/&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="http://lorempixel.com/output/city-q-c-200-200-6.jpg" width="200" height="200" alt="stad"/&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="http://lorempixel.com/output/animals-q-c-200-200-3.jpg" width="200" height="200" alt="beest"/&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="http://lorempixel.com/output/city-q-c-200-200-7.jpg" width="200" height="200" alt="stad"/&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="http://lorempixel.com/output/animals-q-c-200-200-1.jpg" width="200" height="200" alt="beest"/&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="http://lorempixel.com/output/city-q-c-200-200-1.jpg" width="200" height="200" alt="stad"/&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>javascript code:</p>
  
  <pre><code>$.noConflict();
  jQuery( document ).ready(function( $ ) {
  
      var $container = $('.isotope').imagesLoaded( function() {
          $container.isotope({
              itemSelector: '.item',
              layoutMode: 'packery'
          });
      });  
  });
  </code></pre>
  
  <p>css code:</p>
  
  <pre><code>* {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  
  html, body {
      background: #000;
      width: 100%;
      max-width: 100%;
      position: relative;
  }
  
  .isotope {
      width: 100%;
  }
  
  /* ---- .item ---- */
  
  .grid-sizer {
      width: 10%;
  }
  
  .item {
      float: left;
      width: 10%;
      height: auto;
      background: #000;
      border: 0;
  }
  
  .item.med {
      width: 20%;
      height: auto;
  }
  
  .item.large { 
      width: 40%;
      height: auto; 
  }
  
  .item img {
      width: 100%;
      height: auto;
  }
  </code></pre>
  
  <p>The width of the html elements is correct, but when I check the css in the browser Isotope adds some pixels extra to the left and top positions of the elements. Hopefully someone can help me out?</p>
  
  <p>Edit:</p>
  
  <p>It looks like it's working fine on mobile and tablets. Maybe it has something to do with</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  </code></pre>
  
  <p>in the html header?</p>