在网格布局周围有多余的边距

Question

帮助我了解围绕布局的究竟是什么创造了什么。我认为这是网格显示的行为？

我尝试了负距离，它在左和顶部工作，但在右侧创建了空间。

.container {
        font-size: 1.5em;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
          "welcome-section"
          "projects"
          "footer";
      }
      #welcome-section {
        width: 100%;
        height: 100vh;
        margin: auto;
        background: black;
        grid-area: welcome-section;
      }
      #projects {
        background: PaleTurquoise;
        grid-area: projects;
      }
      #footer {
        background: lightpink;
        grid-area: footer;
      }
    </style>
    <div class="container">
      <div id="welcome-section">
        <h1></h1>
      </div>
      <div id="projects">
        <div class="project-tile"></div>
        <div class="project-tile"></div>
      </div>
      <div id="footer"></div>
    </div>

Answer 1

它是body标签。默认情况下它具有保证金。

尝试：

Body{
  margin: 0;
}

Answer 2

只需在＃westair section 的CSS中添加height: 100%;而不是height: 100vh;：

.container {
        
        font-size: 1.5em;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
          "welcome-section"
          "projects"
          "footer";
      }
      #welcome-section {
        width: 100%;
        height: 100%;
        margin: auto;
        background: black;
        grid-area: welcome-section;
      }
      #projects {
        background: PaleTurquoise;
        grid-area: projects;
      }
      #footer {
        background: lightpink;
        grid-area: footer;
      }

<div class="container">
      <div id="welcome-section">
        <h1></h1>
      </div>
      <div id="projects">
        <div class="project-tile"></div>
        <div class="project-tile"></div>
      </div>
      <div id="footer"></div>
    </div>