I'm sure this is a trivial (and perhaps stuid) issue, but I can't get it to work.

I'm trying to use css grid in my react project, but for some reason, there is a huge margin outside of the outer container, and I don't know how to remove it.

Here's the 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>

```

And here is the 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";
}

```

```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";
}
```

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

This is what it looks like: 
[![snapshot](https://i.stack.imgur.com/mmF6V.png)](https://i.stack.imgur.com/mmF6V.png)

I tried to manage the margin: `margin: 0` in several ways, and increase the width `width: 100%`, but nothing works. Additionally, when I remove the margin, it moves the content to the start, and I cannot move it with either `justify-content: center` or `justify-self: center`. 

I'm using react as well, but I'm only rendering this component, and outer div it returns is the `.container` div.

Thank you. 

EDIT: I found a bootstrap import in a react file that was rendering this component, which was the issue. Sorry. *facepalm*. So using `width: 100vw` as suggested actually worked.