CSS网格问题：我无法使外部网格容器填充整个页面

Question

我确定这是一个小问题（也许是stuid问题），但我无法使其正常工作。

我正在尝试在我的react项目中使用css网格，但是由于某种原因，外部容器外部有很大的余量，并且我不知道如何删除它。

这里是html：

<div className="container">
    <div className="header">HEADER</div>
    <div className="menu">MENU</div>
    <div className="content">CONTENT</div>
    <div className="extra">EXTRA</div>
    <div className="footer">FOOTER</div>
 </div>

这里是CSS：

.container {
  height: 100%;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px auto 40px;
  grid-template-areas:
  ". h h h h h h h h h h h"
  "m c c c c c c c c c e e"
  "f f f f f f f f f f f f";
}

.container {
  height: 100%;
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px auto 40px;
  grid-template-areas: ". h h h h h h h h h h h" "m c c c c c c c c c e e" "f f f f f f f f f f f f";
}

<div className="container">
  <div className="header">HEADER</div>
  <div className="menu">MENU</div>
  <div className="content">CONTENT</div>
  <div className="extra">EXTRA</div>
  <div className="footer">FOOTER</div>
</div>

外观如下：

我试图通过几种方式来管理边距：margin: 0，并增加宽度width: 100%，但没有任何效果。另外，当我删除边距时，它将内容移动到开头，并且无法使用justify-content: center或justify-self: center来移动它。

我也使用了react，但是我只渲染了这个组件，它返回的外部div是.container div。

谢谢。

编辑：我在呈现此组件的react文件中找到一个引导导入，这就是问题所在。抱歉。 facepalm

Answer 1

Answer 2