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="large-4 small-12 medium-4 columns">
<h3>Type of Work</h3>
<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>
<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).