Css – Margin surrounding flex container

I have here a flex display which divides the screen into two areas wherein one half has some login info and the other has a background picture. When trying to set the flex, however, i am met with these margins on both sides (orange bars as indicated in inspect element). How do I get rid of these?

Attached is the return value to display and css

        <div className="container">
            <div className="login-col">
            <h2>User Login</h2>
            <MDBContainer fluid className="p-10 my-5">
                <MDBRow>
                    <MDBCol col='4' md='6'>

                    <MDBInput wrapperClass='mb-4' label='Email address' id='email' type='email' size="lg"/>
                    <MDBInput wrapperClass='mb-4' label='Password' id='password' type='password' size="lg"/>

                    <MDBBtn className="mb-4 w-100" size="lg" onClick={login}>Sign in</MDBBtn>
                    </MDBCol>
                </MDBRow>
            </MDBContainer>
            </div>  
        <div className="img-col">
        </div>
    </div>

and its css

.container {
  display:flex;
  height: 100vh;
  width: 100vh;
  margin: auto;
  width: max-content;
}

.login-col{
  flex-basis: 50%;
  padding: 1rem;
  box-sizing: border-box; 
}

.img-col{
  flex-basis: 50%;
  display: flex;
  background-image: url('img.jpg'); 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.image-panel img {
  width: 100%;
  height: 100%;
}