Gap in right margin in react bootstrap component won't go away

I am creating responsive homepage using react-bootstrap. And I made a component which shows simple content, but I cannot make a right margin of the component go away.

At first, I wanted to insert one more content to this map section, that was why I determined to use Row component in react-bootstrap. enter image description here I only apply background-color in app.css.

Map.js

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';



function CloverMap() {


  return (
    <Container style={{margin: 0}}className="mapContainer">
      <header className='tableHead'>Where We Are</header>
      <Row className="tableContent">
   
        <Col>
       <p>Parking Area x 2</p>
       <p>Address</p>
       <p>telephone number</p> 
    </Col>
  </Row>
 
 
    </Container>
  );
}

export default CloverMap;