title: Masonry grid not loading correctly and columns are too wide
body: <p><a href="http://www.scrubsandbeyond.com/bold-colors.aspx" rel="nofollow">link to page</a></p>
  
  <p>Hello! I am trying to get this masonry grid to show up correctly, meaning equal space on all sides and it should stack evenly like <a href="http://s7d2.scene7.com/is/image/scrubs/Screen%20Shot%202016-03-21%20at%209.35.44%20AM?$graphics$&amp;scl=1" rel="nofollow">here</a>.</p>
  
  <p>When the page first loads, it looks like <a href="http://s7d2.scene7.com/is/image/scrubs/Screen%20Shot%202016-03-21%20at%209.46.05%20AM?$graphics$&amp;scl=1" rel="nofollow">this</a>. All of the boxes are collapsed on top of each other and it's like there's a missing column after each one. When you refresh the page, it looks like <a href="http://s7d2.scene7.com/is/image/scrubs/Screen%20Shot%202016-03-21%20at%209.47.13%20AM?$graphics$&amp;scl=1" rel="nofollow">this</a>, which is exactly what i'm looking for except there should be 4 columns at full width but it only shows as 2, same as last time.. it's like there's a margin in between the columns as opposed to just having another column there like there should be. The spacing below the boxes is exactly what i'm going for on all sides.</p>
  
  <p>Here is my code:</p>
  
  <p>Script tag</p>
  
  <pre><code>&lt;script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"&gt;    &lt;/script&gt;
  </code></pre>
  
  <p>HTML/jQuery:</p>
  
  <pre><code>&lt;div id="MainContent" class="fullwidth"&gt;
  &lt;div style="width: 100%;height:20px;clear:both;"&gt;&lt;/div&gt;
  &lt;div class="title"&gt;BOLD COLORS&lt;/div&gt;
  &lt;div class="subtitle"&gt;Scrubs &amp; Beyond Lookbook&lt;/div&gt;
  
  
  &lt;div class="grid"&gt;
  &lt;div class="grid-sizer"&gt;&lt;/div&gt;
  &lt;div class="product-box grid-item"&gt;
      &lt;a href="#"&gt;&lt;img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&amp;scl=1"&gt;&lt;/a&gt;
  Here is one with just a little bit of text
  
  &lt;/div&gt;
  &lt;div class="product-box grid-item"&gt;
      &lt;a href="#"&gt;&lt;img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&amp;scl=1"&gt;&lt;/a&gt;
   Here is one with just a little bit of text, plus a lot more text so we can get a good idea of how these things are going to stack eventually
  &lt;/div&gt;
   &lt;div class="product-box grid-item"&gt;
  
      &lt;a href="#"&gt;&lt;img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&amp;scl=1"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="product-box grid-item"&gt;
  
      &lt;a href="#"&gt;&lt;img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&amp;scl=1"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="product-box grid-item"&gt;
  
      &lt;a href="#"&gt;&lt;img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&amp;scl=1"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="product-box grid-item"&gt;
  
      &lt;a href="#"&gt;&lt;img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&amp;scl=1"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="product-box grid-item"&gt;
  
      &lt;a href="#"&gt;&lt;img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&amp;scl=1"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="product-box grid-item"&gt;
  
      &lt;a href="#"&gt;&lt;img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&amp;scl=1"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="product-box grid-item"&gt;
  
      &lt;a href="#"&gt;&lt;img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&amp;scl=1"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="product-box grid-item"&gt;
  
      &lt;a href="#"&gt;&lt;img src="http://s7d2.scene7.com/is/image/scrubs/prod1?$graphics$&amp;scl=1"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- end grid --&gt;
  &lt;div style="width: 100%;height:20px;clear:both;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 290,
  gutter: 10
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.title {
  font-family: "HelveticaNeueW01-65Medi",sans-serif;
  color: #e23342;
  font-size: 30px;
  width: 100%;
  text-align: center;
  letter-spacing: 6px;
  }
  .subtitle {
  font-family: "HelveticaNeueW01-45Ligh";
  color: #8d5291;
  font-size: 20px;
  width: 100%;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 20px;
  } 
  .product-box {
  padding: 5px;
  background-color: #f5f5f5;
  margin-right: 10px;
  margin-bottom: 20px;
  float: left;
  
  }
  .grid-item { width: 290px; }
  .grid {
  background: none!important;
  }
  </code></pre>
  
  <p>Could someone help me figure out why this isn't showing properly? <a href="http://masonry.desandro.com/" rel="nofollow">The Masonry page I am working from</a>.
  I know it has to be something simple that i'm missing, but I just cannot figure out what it is! Thanks in advance!</p>