尝试在 css 网格模板中查找框之间的间隙

问：

我已经尝试了好几天了，并且一直非常纠结于如何分隔网格区域模板上的列。我几乎尝试了我能想到的一切！有人可以帮我吗？

我尝试过网格模板行和列、填充等。我似乎无法在盒子之间找到空格！我真的不知道我是否写错了整个东西，或者只是容器有一些问题？请试着帮助我！我的作业将于本周五到期！

/** Not allowed to change this initial CSS code **/
body {
  background: url(../img/12_col.gif) center top repeat-y;
  background-size: 90%;
}

/*************************************************/

/* CSS for container class for header boxes sidebar and content */

        [class*=container] {
  width: 90%;
  min-height: 600px;
  display: grid;
  margin:  20px auto;
 grid-template-columns: 1fr;
padding 20px;
}
    




#head{
  display: grid;
  grid-template-columns: (1, 1fr);
  grid-template-areas:
    "header "
  
     
  
    
  }
    header {
      border: 1px solid black;
         grid-area: header;
    }
  
#boxes{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-areas:
    
    "box1 box2 box2  box2 box2 box2 box3";
}
    box1 {
      border: 1px solid black;
      grid-area: box1;
    }
    
    box2 {
      border: 1px solid black;
      grid-area: box2;
    }
    
    box3 {
      border: 1px solid black;
      grid-area: box3;
    }
    
  



#main {
  display: grid;
  
  grid-template-columns: repeat(8, 1fr);
  grid-template-areas:
    "main main main main main main sidebar sidebar";
  
}

aside {
  border: 1px solid black;
  grid-area: sidebar;
  padding: 5px;
}

main {
  border: .1px solid black;
  grid-area: main;
  padding: 5px;
}



#footer {
  
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "footer1 footer2 footer3 footer4";
  padding: 5px;
  border: 1px solid black;
  
}


footer1 {
  border: 1px solid black;
  grid-area: footer1;
}

footer2 {
  border: 1px solid black;
  grid-area: footer2;
}

footer3 {
  border: 1px solid black;
  grid-area: footer3;
}

footer4 {
  border: 1px solid black;


}

html:
<div class="container">

        <div id="head">
            <header>Header</header>
        </div>
        <div id="boxes">    
            <box1>Box 1</box1>
            <box2>Box 2 </box2>
            <box3>Box 3</box3>
        </div>

        <div id="main">
            <aside>Sidebar</aside>
            <main>main</main>
        </div>


    <!-- Class for footer to be able to have double borders -->


        <div id="footer">
            <footer1>Footer</footer1>
            <footer2>Footer</footer2>
            <footer3>Footer</footer3>
            <footer4>Footer</footer4>
        </div>
    </div>

    



</body>

</html>