Block grid shows horizontal scroll bar in Foundation

Question

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:

.row
  max-width: 100%

Here is the code:

<nav class='top-bar'>
  <ul class='title-area'>
    <li class='name'>
      <h1>
        <a href='#'>
          My Website
        </a>
      </h1>
    </li>
    <li class='toggle-topbar menu-icon'>
      <a href='#'>
        <span>menu</span>
      </a>
    </li>
  </ul>
  <section class='top-bar-section'></section>
</nav>
<div class='row'>
  <ul class='small-block-grid-2 large-block-grid-4'>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
    <li>
      <img src='http://placehold.it/500x500&text=Thumbnail' />
    </li>
  </ul>
</div>

I am getting annoying horizontal scroll bar. See below screenshot

I know it is the margin below:

@media only screen
[class*="block-grid-"]
  margin: 0 -0.625em;

But do I suppose to override it? It doesn't feel right (seem like a hack). How do I use Foundation properly to display block grid with full screen? It's a simple layout requirement.

Answer 1

If you look at the docs explaining the Foundation grid they already use the box-sizing: border-box star hack

Since the .row containing your block-gridhas a set max-width of 100% it's overflowing the screen width. Typically, elements in the grid would be nested in .rows with defined max-widths and also contained within defined column sizes.

You can simply just do the hacky thing as you deeply fear and adjust the margin:

@media only screen [class*="block-grid-"] margin: 0 2em;

Or you can just contain your .block-grid with a container <div class="large-12 columns">.

Six of one half-a-dozen of the other I'd say. If you're afraid of screwing up the grid layout, you can use a conditional class on the body tag so that your customized block-grid only effects the pages that you want.