Html CSS网格问题：我可以'；t使外部网格容器填充整个页面

我确信这是一个微不足道的问题，但我无法让它发挥作用

我试图在我的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>

.container{
身高：100%；
显示：网格；
网格间距：3倍；
网格模板列：重复（12，1fr）；
网格模板行：40px自动40px；
网格模板区域：“.h h h h h h h”“m c c c c e”“f f f f f f”；
}

标题
菜单
内容
额外的
页脚

如果您正在使用create react应用程序，请删除create react应用程序附带的css

否则试试

.container {
  height: 100vh;
  width: 100vw;
  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";
}

---

这将填满整个浏览器。注意宽度：100vw，而不是宽度：100vh：

<div style="width:100vw; height:100vh ; background-color: red;"></div>

删除内容（如果有）。还有

.container

样式的父级呢？@davidsaysrestatemonica

类名

是一个React约定，所以情况并非如此。但我会看看是否可以添加更多的上下文。谢谢。这使它变得更宽了一点，但是由于某种原因，

.container

div仍然附加了一个边距。但是，我在呈现组件的React文件中发现了一个引导导入，这导致了问题。你对react css文件的建议让med寻找这个。很抱歉给你添麻烦了！谢谢

<div style="width:100vw; height:100vh ; background-color: red;"></div>