Zurb Foundation 4 - Nested grid alignment issues - grid

Question

I've been trying to align a nested row when using the Foundation 4 grid, to almost no avail.
FYIs, I use EpiServer CMS so I have to inject certain styles with mixins.
The issue is that when I have an embedded div.row inside my 8-column-injected div#content, that row & its columns are not flush with the elements outside it.
I tried to add this mixin: div.unmanagedContent {#include grid-row(nest);} which works in this example, but then the negative margin pulls that div out when there is no embedded .row inside div#content.
My SCSS looks like so. Note that I've just attached an external CSS at CodePen so you'll see the outputted styles:
// 12 total columns
.contentLayoutBox {
#include grid-row;
}
#content {
#include grid-column(8);
}
#sidebarRight {
#include grid-column(4);
}
Here's an example at CodePen & the Foundation 4 Grid Docs.
Any help would be great. Thanks.

Answer 1

I wish could see more of your Sass code and such, but my guess is that you need to use the nest behavior on all of your nested rows.
It seems to me that Foundation's rows in Sass are designed mainly to be used at one level. ANY row that is nested within another should use the nest behavior unless you want the extra padding on the columns.
In your CodePen, I was able to fix the issues with the padding on columns by adding a class of collapse to all of the rows, which I believe is the same as doing $behavior: nest within the Sass:
<div class="unmanagedContent">
<div>
<div class="row collapse">
<div class="small-12 columns">
<div class="row wtf collapse">
<div class="small-12 columns">
<h2>Embedded .row</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam dolore delectus accusamus explicabo odit odio minima architecto sequi nihil alias asperiores tenetur distinctio blanditiis quis officia tempora itaque voluptates maiores.</p>
</div>
</div>
</div>
</div>
</div>
</div>
If I were to try to style this with the Sass mixins, this is what I would do...
HTML:
<div class="layout-unmanaged-content">
<div class="layout-content">
<div class="layout-embedded-row">
<div class="layout-content">
<h2>Embedded .row</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam dolore delectus accusamus explicabo odit odio minima architecto sequi nihil alias asperiores tenetur distinctio blanditiis quis officia tempora itaque voluptates maiores.</p>
</div>
</div>
</div>
</div>
Sass:
.layout-unmanaged-content {
// You'll need to have the nest here if this is within another Foundation row.
#include grid-row(nest);
> .layout-content {
#include grid-column(12);
}
}
.layout-embedded-row {
#include grid-row(nest);
> .layout-content {
#include grid-column(12);
}
}

Answer 2

Thanks again, #Chris Peters. The answer seems simple now.
You are right in that only top-level row classes should have the mixin #include grid-row and their decedents should be nested with #include grid-row(nest), so here's what I did:
.one-main-row-class, .another-main-row-class {
#include grid-row;
//Nest decendents of the top-level grid-row
.row {
#include grid-row(nest);
}
}