title: max-width with css grid
body: <p>I'm wondering how css grids can make use of max-widths. In the old way, you'd use a container with wrapper class that'd set the margins.</p>
  
  <p>With CSS grids, depending on how you create them, you no longer need to use containers and sometimes you have no where to add one.</p>
  
  <p>I want the header to be full width, but I want the nav within it to have a max width of 80% of the screen's resolution and margin auto it, this code is similar to the way one would have done it with a wrapping container. The question is, how do I do the same with aside and main as they are not inside of a parent to set a max width with?</p>
  
  <pre><code>body {
      display: grid;
      grid-template-areas: 
      "header header"
      "aside main";
      grid-template-columns: 275px 1fr;
      grid-template-rows: 1fr 1fr;
  }
  
  header {
      grid-area: header;
      border: solid 1px black;
  }
  
  header &gt; nav {
      max-width: 80%;
      margin: auto;
      border: solid 1px blue;
  }
  
  aside {
      grid-area: aside;
  }
  
  main {
      grid-area: main;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;header&gt;
              &lt;nav&gt;nav&lt;/nav&gt;
          &lt;/header&gt;
          &lt;aside&gt;aside&lt;/aside&gt;
          &lt;main&gt;main&lt;/main&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I have to wrap them inside of a container, how will that affect the grid? If I set the max width on the html or body tag then how would I get a header that stretches the full width of the browser?</p>
  
  <p><a href="https://jsfiddle.net/6zd3o088/6/" rel="noreferrer">https://jsfiddle.net/6zd3o088/6/</a></p>