Gap in right margin of page won't go away - reactjs

Question

I'm building a new project using reactJS, nodeJS, and react-bootstrap. When setting up my landing page. There is a gap in the margin on the right side of the page that won't go away, no matter what I try.
.I've tried including the meyer's reset css file in the index.html.
.I've tried setting margins, borders, and padding on the Body element to zero.
.I've tried setting my Container to width: 100%.
.I've tried resizing the background image.
.I've tried including the bootstrap 4 cdn in my index.html.
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import LandingPage from './components/landingpage';
import Header from './components/header';
import Footer from './components/footer';
import './App.css';
class App extends Component {
render() {
return (
<Router>
<Header/>
<Switch>
<Route exact path='/' component={LandingPage}/>
</Switch>
<Footer/>
</Router>
);
}
}
export default App;
App.css
/* {
box-sizing: border-box;
}*/
body {
background-image: url('./images/background.jpg');
background-repeat: no-repeat;
background-position: center center;
/*background-size: cover;*/
font-family: 'Courgette', cursive;
color: beige;
font-size: 28px;
text-align: center;
max-width: 100%;
margin: 0;
border: 0;
padding: 0;
}
.container {
margin: 0;
padding: 0;
width: 100%;
}
.courgette {
font-family: 'Courgette', cursive;
}
.lobster {
font-family: 'Lobster', cursive;
}
header.js
import React from "react";
import './header.css';
import { Container, Row, Col } from 'react-bootstrap';
import { Link } from "react-router-dom";
const Header = () => {
return(
<Container className='header'>
<Row>
<Col>
<Link href="#">
<img className='hamburgermenu' src={require('./../../images/navbaricon.png')} alt='Hamburger Menu Icon'/>
</Link>
</Col>
<Col>
<h1>MDNight</h1>
</Col>
<Col>
<p>Hello!</p>
</Col>
</Row>
</Container>
)
}
export default Header;
header.css
.header{
background-color: maroon;
margin: 0;
}
.hamburgermenu {
height: 80px;
width: auto;
}
The header is supposed to extend to the edge of the page, but it does not.

Answer 1

There is any margin gap in the application.