title: Full width divs with max width content
body: <p>I'm having issues having full width divs that have different % widths and also keeping the content fixed within it and lining it up with another full width div. The JS Fiddle should be better at explaining this.</p>
  
  <pre><code>&lt;header&gt; &lt;!-- 100% width --&gt;
   &lt;div&gt;&lt;/div&gt; &lt;!-- 100% width; max-width: 1000px; margin: auto --&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>The above works fine if it was a single column.</p>
  
  <p>I want to have two divs below it, one taking up 33% and the other taking up 67% and keeping the content within these lined up similar to how the above is working. The max-width div is the visible content container. So if you were viewing the site on a large screen everything would be edge to edge, but the content within would be framed in the middle.</p>
  
  <p>Sample fiddle, where the divs with 2 and 3 should take up the same amount of space as the div above it. <a href="http://jsfiddle.net/qtLe7o8f/1/" rel="nofollow noreferrer">http://jsfiddle.net/qtLe7o8f/1/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header {
    background: blue;
    padding: 15px 0;
  }
  header div {
    max-width: 500px;
    background: red;
    margin: auto;
  }
  
  section.one {
    float: left;
    width: 33%;
    background: green;
    padding: 15px 0;
  }
  section.one div {
    background: red;
    float: right;
  }
  
  section.two {
    float: left;
    width: 67%;
    background: orange;
    padding: 15px 0;
  }
  section.two div {
    background: red;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;div&gt;
    1
    &lt;/div&gt;
  &lt;/header&gt;
  &lt;section class="one"&gt;
    &lt;div&gt;
      2
    &lt;/div&gt;
  &lt;/section&gt;
  &lt;section class="two"&gt;
    &lt;div&gt;
      3
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>