title: Why won't my CSS grid fill the entire screen?
body: <p>I can't seem to figure out why my grid will not fill out the entire (or at least more of the) screen. I can't seem to make the grid fill out the screen more, so that the white space on the left and right side does not take up so much of the screen space on bigger monitors.</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>     @media only screen and (max-width:970px){
         .billedebar{display: none;}
          }
      
          /*Tablets, Ipads osv*/
          @media only screen and (min-width:600px){
          
          #content{
           margin-left: auto;
           margin-right: auto;
           max-width: 970px;
           display: grid;
           grid-template-columns:repeat(auto-fill,1fr);
           grid-auto-rows:minmax(100px,auto);
           grid-gap: 10px;
           grid-template-areas:
            "header header header header"
            "main main main main"
            "main main main main"
            "main main main main"
              "billedebar billedebar billedebar billedebar"
            "boks01 boks01 boks02 boks02"
            "boks03 boks03 boks04 boks04"
            "footer footer footer footer";
            } }
          
            /*DESKTOP/LAPTOP*/
            @media only screen and (min-width:970px){
          
          #content{
             margin-left: auto;
             margin-right: auto;
             display: grid;
             grid-template-columns: repeat(4,1fr);
             grid-auto-rows: minmax(100px,auto);
             grid-gap: 10px;
             grid-template-areas:
              "header header header header"
                  "header header header header"
              "billedebar main main main"
              "billedebar main main main"
              "billedebar main main main"
              "boks01 boks02 boks03 boks04"
                  "boks01 boks02 boks03 boks04"
              "footer footer footer footer"
                  "footer footer footer footer";
          
            }
          
             .billedebar{
              display: block;
             }
          
          
            }
          
          #content div{
             background: #3498db;
               padding: 10px; /*tekst i grid paddes ind fra kant*/
             color: white;  }
          
            .header{
             grid-area: header;
            }
          
            .billedebar{
             grid-area: billedebar;
            }
          
            .main{
             grid-area: main;
            }
          
            .section{
             grid-area: bigad;
            }
          
            .boks01{
             grid-area: boks01;
            }
          
            .boks02{
             grid-area: boks02;
            }
          
          
            .boks03{
             grid-area: boks03;
            }
          
          
            .boks04{
             grid-area: boks04;
            }
          
            .footer{
             grid-area: footer;
            }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;body&gt;
            &lt;div id="content"&gt;
      
          &lt;div class="header"&gt;&lt;p&gt;header&lt;/p&gt;&lt;/div&gt;
          &lt;div class="billedebar"&gt;billedebar&lt;/div&gt;
          &lt;div class="main"&gt;main&lt;/div&gt;
          &lt;div class="boks01"&gt;ad&lt;/div&gt;
          &lt;div class="boks02"&gt;ad&lt;/div&gt;
          &lt;div class="boks03"&gt;ad&lt;/div&gt;
          &lt;div class="boks04"&gt;ad&lt;/div&gt;
          &lt;div class="footer"&gt;footer&lt;/div&gt;
      
         &lt;/div&gt;
      
      &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>