title: Block grid shows horizontal scroll bar in Foundation
body: <p>I am just starting to learn Foundation (from previous messy css experience). I am trying to do a full screen block grid of 4 col images per row. I have this to make the row full width:</p>
  
  <pre><code>.row
    max-width: 100%
  </code></pre>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;nav class='top-bar'&gt;
    &lt;ul class='title-area'&gt;
      &lt;li class='name'&gt;
        &lt;h1&gt;
          &lt;a href='#'&gt;
            My Website
          &lt;/a&gt;
        &lt;/h1&gt;
      &lt;/li&gt;
      &lt;li class='toggle-topbar menu-icon'&gt;
        &lt;a href='#'&gt;
          &lt;span&gt;menu&lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;section class='top-bar-section'&gt;&lt;/section&gt;
  &lt;/nav&gt;
  &lt;div class='row'&gt;
    &lt;ul class='small-block-grid-2 large-block-grid-4'&gt;
      &lt;li&gt;
        &lt;img src='http://placehold.it/500x500&amp;text=Thumbnail' /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src='http://placehold.it/500x500&amp;text=Thumbnail' /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src='http://placehold.it/500x500&amp;text=Thumbnail' /&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src='http://placehold.it/500x500&amp;text=Thumbnail' /&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am getting annoying horizontal scroll bar. See below screenshot</p>
  
  <p><img src="https://i.stack.imgur.com/vqRM2.gif" alt="enter image description here"></p>
  
  <p>I know it is the margin below:</p>
  
  <pre><code>@media only screen
  [class*="block-grid-"]
    margin: 0 -0.625em;
  </code></pre>
  
  <p>But do I suppose to override it? It doesn't feel right (seem like a <strong>hack</strong>). How do I use Foundation properly to display <strong>block grid with full screen</strong>? It's a simple layout requirement.</p>