Im using foundation 5 and getting a horizontal scroll on bottom of the page on smaller screen anything below iPad.im trying to figure out what is causing this only obvious thing i could notice was the navigation shifting not sure how to go about it to fixing it im sure its something i have missed out or i have done it wrong.
Link to see the issue here , if you resize browser you will start seeing a horizontal scroll below the page.
what am i missing here to fix it.
I think this is what’s messing things up:
.row .row {
width: auto;
[COLOR="#FF0000"]margin-left: -0.9375rem;
margin-right: -0.9375rem;[/COLOR]
margin-top: 0;
margin-bottom: 0;
max-width: none;
}
Thanks for the reply, will check now if it fixes it.
tried removing the margin for the row, didnt seem to fix it
Those styles I highlighted above are still there, on line 134 of foundation.css. Comment out those lines and clear your browser cache. Trust me, it works. 
Hi,
You shouldn’t really alter that .row .row class as that is part of foundations structure.
The real problem is that you have nested a row inside a row without it being in a column. Nested rows get a negative margin to offset the padding on the column class and if you don’t use a column then the nested row gets dragged too wide. If you aren’t using a column then you don’t need the row.
When you are using a grid layout like foundation or bootstrap then you must stick rigidly to the rules.
This is the section that goes wrong:
<div class="row">
[B]<div class="typeofwork">[/B]
<div class="large-4 small-12 medium-4 columns">
<h3>Type of Work</h3>
</div>
<div class="large-8 small-12 medium-8 columns clearfix">
<ul class="typesfilter inline-list">
<li><a href="#" data-filter="*" class="current">All</a></li>
<li><a href="#" data-filter=".corporateeventsimg">Corporate Events</a></li>
<li><a href="#" data-filter=".socialeventsimg">Social Events</a></li>
<li><a href="#" data-filter=".partyplanningimg">Party Planning</a></li>
</ul>
</div>
[B]<div class="row">[/B]
<div class="large-12 small-12 medium-12 columns">
A row element should be immediately be followed by a column classed element and the same for nested rows which themmselves must be inside a column class (or columns class).
Commented line 134 it worked great thanks for that, now i will clean up the code a bit and remove the nested row and check thank you.
Be careful though as it will break the foundation functionality. You should never need to alter their grid structure rules as they all work together.
It’s pretty simple in that you have a row then you follow it with a column. Any nested rows must be inside that column and also have a first child of column. Any other structure makes no sense and you may as well drop the grid altogether if you are going to make changes to its core behaviour.
Examples of the foundation grid structure from the foundation docs:
<div class="row">
<div class="small-2 large-4 columns">...</div>
<div class="small-4 large-4 columns">...</div>
<div class="small-6 large-4 columns">...</div>
</div>
<div class="row">
<div class="small-8 columns">8
<div class="row">
<div class="small-8 columns">8 Nested
<div class="row">
<div class="small-8 columns">8 Nested Again</div>
<div class="small-4 columns">4</div>
</div>
</div>
<div class="small-4 columns">4</div>
</div>
</div>
<div class="small-4 columns">4</div>
</div>
I guess I should stop answering framework questions. 
(Rotten silly things they are …)
I can see benefits of frameworks for medium to large sites for experienced coders but they (frameworks) do seem to attract those without the necessary experience to cope with the process of using and adapting them. For smaller sites there’s really no need to use them unless you are prepared to strip them down and use just what you need but by the time you’ve done that you could have coded the site from scratch anyway.