Unintended gap im my screen left side created how to prevent it

See more:

CSS

ReactJS

I designed the webpage layout in react js by using the grid when added the container the left side of the browser gap occurs please give me suggestions.

What I have tried:

//css

<pre>body {
    overflow-x: hidden;
  }

.container {
  display: grid;
  grid-template-areas:
    "main-navbar main-navbar main-navbar "
    "small-navbar small-navbar small-navbar"
    "first-contaner first-contaner first-contaner"
    "second-container second-container second-container"
    "third-container third-container third-container"
    "fourth-container fourth-container fourth-container"
    "fifth-container fifth-container fifth-container";

  max-width: 100%;
  
  height: 3560px;
  
  position: absolute;



}

.main-navbar {
  grid-area: main-navbar;
box-sizing: border-box;
  width: 56%;
  height: 128px;
}

.text-title-size {
  width: 450px;
}

.small-navbar {
  grid-area: small-navbar;
  box-sizing: border-box;
  width: 56%;
  height: 43px;
  background: rgba(7, 161, 137, 0.14);
}

.first-contaner {
  grid-area: first-contaner;
  box-sizing: border-box;
  width: 56%;
  height: 969px;


  background: #0AB79B;

}

.second-container {
  grid-area: second-container;
  width: 56%;
  box-sizing: border-box;
  height: 723px;
  background-color: #E3F2FD;
}

.third-container {
  grid-area: third-container;
  box-sizing: border-box;
  width: 56%;
  height: 472px;
  background: #FFFFFF;

}

.fourth-container {
  grid-area: fourth-container;
  box-sizing: border-box;
  width: 56%;
  height: 783px;
  background: #0AB79B;

}

.fifth-container {
  grid-area: fifth-container;
  box-sizing: border-box;
  width: 56%;
  height: 442px;


  background: #FBFBFB;

}

<pre>import './App.css';
import NavbarComponet from './Components/Navbar';
import SmallNavbarComponet from './Components/SmallNavbarComponet';
import FirstContainer from './Components/FirstContainer';
import SecondContainer from './Components/SecondContainer';
import ThirdContainer from './Components/ThirdContainer';
import FourthContainer from './Components/FourthContainer';
import FifthContainer from './Components/FifthContainer';
function App() {
  return (
   <>
    <div class="container">
  <div class="main-navbar"><NavbarComponet/></div>
   <div class="small-navbar"><SmallNavbarComponet/></div>
  <div class="first-contaner"><FirstContainer/></div>
  <div class="second-container"><SecondContainer/></div>
  <div class="third-container"><ThirdContainer/></div>
  <div class="fourth-container"><FourthContainer/></div>
  <div class="fifth-container"><FifthContainer/></div> 
</div>
   </>
  );
}
//app.js layout
export default App;