title: jQuery Isotope / Masonary Gutter Issue
body: <p>I am using jQuery <a href="http://isotope.metafizzy.co/" rel="nofollow noreferrer">Isotope</a>. It's a great plugin but I'm having a little issue with aligning the items in masonry mode. My container is 960px wide and my goal is to get 4 items to line up perfectly as if it were using the 960px grid system. So, both the left and right edges would be touching the the edge of the container. Here is a screen shot of how it looks at the moment:</p>
  
  <p><img src="https://i.stack.imgur.com/qfOqO.png" alt="enter image description here"></p>
  
  <p>My code is currently like so:</p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$('#container').isotope({
    itemSelector : '.item',
        masonry : {
            columnWidth : 240,
            gutterWidth: 10
        }
  });
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.item{
  width:230px;
  background:red;
  overflow: hidden;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code> &lt;div class="item"&gt;a&lt;/div&gt;
  </code></pre>
  
  <p>So far the only way I have managed to get it to work is to set the width to <code>240px</code> but then there is no gap between the items.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is a fiddle showing what I have <a href="http://jsfiddle.net/qGJhe/" rel="nofollow noreferrer">http://jsfiddle.net/qGJhe/</a></p>