title: Foundation framework nested columns
body: <p>super-new to grids and Foundation (I'm using 6.3). I just wanted to check I had this correct, as I was finding it difficult to check against the official documenation.</p>
  <p>Basically Im trying to center 8 columns in a row. Then I want two columns within this, one for content and a smaller one for a sidebar.</p>
  <p>Initially I created the following as it made sense to me that a large-8 column would then have a large-6 and large-2 within it, adding up to the 8 of the container.</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;large-8 columns large-centered&quot;&gt;
        &lt;div class=&quot;large-6 columns&quot; style=&quot;background-color: red;&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;large-2 columns&quot; style=&quot;background-color: green;&quot;&gt;2&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This did not work, but the following does. Before I continue I wanted to check if this is the correct way of doing what I want to do (so effectively the large-8 and large-4 add up to 12 again, despite being nested within a large-8.</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;large-8 columns large-centered&quot;&gt;
        &lt;div class=&quot;large-8 columns&quot; style=&quot;background-color: red;&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;large-4 columns&quot; style=&quot;background-color: green;&quot;&gt;2&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>