Block grid shows horizontal scroll bar in Foundation - css

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.

Answer 2

take a look of this demo by Paul Irish
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
this might be helpful else can you provide a fiddle?

Answer 3

For those who do not want to wrap their block grid within the standard row/column grid, simply hide the overflow on your block grid's parent element. Here's a superfluous code demonstration.
(html)
<div class="block-grid-parent">
<ul class="block-grid">
...
(css)
.block-grid-parent {
overflow: hidden;
}