Foundation 6 nesting default width row inside expanded row
<p>I want the background of a row full width and the content within it a standard width row.</p>

<p>I'm attempting to do this by created a expanded width row, applying a background to it and nesting a standard row inside it. However the nested row is full expanded width despite not having the expanded class. </p>

<p>Here is my attempt</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="small-2 large-4 columns"&gt;&lt;!-- ... --&gt;&lt;/div&gt;
  &lt;div class="small-4 large-4 columns"&gt;&lt;!-- ... --&gt;&lt;/div&gt;
  &lt;div class="small-6 large-4 columns"&gt;&lt;!-- ... --&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class="row expanded"&gt;
  Expanded row
  &lt;div class="row"&gt;
    &lt;div class="large-12"&gt;Nested Row&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><a href="http://codepen.io/onlyslightly/pen/beqZwo" rel="nofollow">http://codepen.io/onlyslightly/pen/beqZwo</a></p>

<p>Is there a way to nest standard width rows inside expanded width rows? Or is there a more appropriate way to perform this action?</p>