Html 网格布局周围不需要的边距

请帮助我了解到底是什么在布局周围创建了边距。 我想这就是网格显示的行为方式

我尝试了负边距，它适用于左边和上面，但在右边创造了空间

.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>

.container{
字号：1.5em；
最小高度：300px；
宽度：100%；
背景：浅灰色；
显示：网格；
网格模板列：自动；
网格模板行：自动1fr自动；
网格模板区域：
“欢迎部分”
“项目”
“页脚”；
}
#欢迎区{
宽度：100%；
高度：100vh；
保证金：自动；
背景：黑色；
网格区：欢迎区；
}
#计划{
背景：淡绿色；
网格区域：项目；
}
#页脚{
背景：浅粉红色；
网格区域：页脚；
}

这是

主体

标签。默认情况下，它有边距

尝试：

---

只需添加高度：100%代替

高度：100vh：


.container{
字号：1.5em；
最小高度：300px；
宽度：100%；
背景：浅灰色；
显示：网格；
网格模板列：自动；
网格模板行：自动1fr自动；
网格模板区域：
“欢迎部分”
“项目”
“页脚”；
}
#欢迎区{
宽度：100%；
身高：100%；
保证金：自动；
背景：黑色；
网格区：欢迎区；
}
#计划{
背景：淡绿色；
网格区域：项目；
}
#页脚{
背景：浅粉红色；
网格区域：页脚；
}

尝试将正文的边距设置为0：（正文默认有边距）
正文{margin:0；}
没有任何作用，因此我选择了“视图高度”
Body{
  margin: 0;
}