title: Contents in a grid cannot be shown correctly
body: <p>I've finished to divide each part of layouts with grid. But the contents (including the elements and the nesting elements inside) cannot be shown at the correct position (between nav and footer) when I debugged the HTML and CSS code which will be shown below:</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>article {
      display: grid;
      grid-template-rows: 20vh 10vh auto 10vh;
      grid-template-columns: 10vw 20vw 20vw 20vw 20vw 10vw;
      grid-template-areas: ". header header header header ."
      ". nav nav nav nav ."
      ". section section section section ."
      ". footer footer footer footer ."
  }
  header { 
      grid-area: header; 
      background-color: whitesmoke; 
      position: fixed;
  }
  nav { 
      grid-area: nav; 
      background-color:lightskyblue; 
      display: flex;
      justify-content: center;
      flex-direction: row;
      margin: auto;
      left: 0ex;
      right: 0ex;
      background-color: lightskyblue;
      align-items: center;
      position: relative;
      font-family: Kanit;
  }
  section { 
      grid-area: content; 
      background-color: whitesmoke; 
  }
  footer { grid-area: footer; background-color: lightskyblue; }
  
  div.pi{
      width: 60vh;
      height: 40vh;
      margin: 0;
      font-family: Ubuntu;
  }
  h1{
      margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Introduce Myself&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="indexDemo.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;article&gt;
              &lt;header&gt; &lt;/header&gt;
              &lt;nav&gt;
                  &lt;a class="guilding" href="#P2"&gt;Personal Information &amp; Career Goal&lt;/a&gt;
                  &lt;a class="guilding" href="#P3"&gt;Education&lt;/a&gt;
                  &lt;a class="guilding" href="#P4"&gt;Work Experience &amp; Placements&lt;/a&gt;
                  &lt;a class="guilding" href="#P5"&gt;Skills&lt;/a&gt;
                  &lt;a class="guilding" href="#P6"&gt;Hobbies &amp; Interests &amp; Achievements&lt;/a&gt;
              &lt;/nav&gt;
              &lt;section&gt; 
                  &lt;div class="pi"&gt;
                      &lt;h1 id="#P2"&gt;Personal Information&lt;/h1&gt;
                      &lt;p&gt;concrete contents
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="photo"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="pic"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="cg"&gt;
  
                  &lt;/div&gt;
                  &lt;div id="#P5"&gt;
  
                  &lt;/div&gt;
              &lt;/section&gt;
              &lt;footer&gt; &lt;/footer&gt;
          &lt;/article&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I don't know why It happened and ask for any help.</p>