React Bootstrap Cards are overlapping

I am trying to create a React Bootstrap card view, where all cards should have some space between each other. But my created React Bootstrap cards do not have the expected space between them.

I have tried to achieve the above mentioned design.

Here is my App.js:

import './App.css';
import HeaderComponent from './HeaderComponent';
import FooterComponent from './FooterComponent';
import BootstrapPractice from './BootstrapPractice';
function App() {
  let name = "Absar Ahmad"
  let testArray = [10, 20, 30, 40];
  let myObject = {
    'name': "Object In JXS",
    'cName': "MERN",
    'Desc': "React JS Learning"
  }

  let status = true;
  return (
    <div className='main' >
      <HeaderComponent />
      <h1 className='text-danger'>{name}</h1>
      {
        testArray.map((arrayValues, i) => {
          return (
            <div key={i}>
              {arrayValues}
            </div>
          )
        })
      }

      <div>{myObject.name}</div>
      <div>{myObject.cName}</div>
      <div>{myObject.Desc}</div>
      <div>Sum of 10 and 20= {10 + 20}</div>

      {
        status ? <h1 style={{ color: "red", backgroundColor: "yellow" }}>Welcome to Ternary Operator</h1> : ""
      }


      <div className='row'>
        <CardExample />
        <CardExample />
        <CardExample />
        <CardExample />
        <CardExample />
        <CardExample />
        <CardExample />
      </div>


      <BootstrapPractice />

      <FooterComponent />

    </div>
  );
}

export default App;


function CardExample() {
  return (
    <div className='cardItems'>Card Div</div>
  )
}

Here is my BootstrapPractice.js:

import Card from 'react-bootstrap/Card';
import { Col, Container, Row, Button } from 'react-bootstrap'

function BootstrapPractice() {
    return (
        <Container fluid>
            <Container>
                <Row>
                    <Col className='col-12 text-center py-4'>
                        <h1>Our Courses</h1>
                    </Col>
                </Row>
                <Row>
                    <Col lg="3" md="6">
                        <Card style={{ width: '18rem' }}>
                            <Card.Body>
                                <Card.Title>Card Title</Card.Title>
                                <Card.Text>
                                    Some quick example text to build on the card title and make up the
                                    bulk of the card's content.
                                </Card.Text>
                                <Button variant="primary">Go somewhere</Button>
                            </Card.Body>
                        </Card>
                    </Col>

                    <Col lg="3" md="6">
                        <Card style={{ width: '18rem' }}>
                            <Card.Body>
                                <Card.Title>Card Title</Card.Title>
                                <Card.Text>
                                    Some quick example text to build on the card title and make up the
                                    bulk of the card's content.
                                </Card.Text>
                                <Button variant="primary">Go somewhere</Button>
                            </Card.Body>
                        </Card>
                    </Col>
                    <Col lg="3" md="6">
                        <Card style={{ width: '18rem' }}>
                            <Card.Body>
                                <Card.Title>Card Title</Card.Title>
                                <Card.Text>
                                    Some quick example text to build on the card title and make up the
                                    bulk of the card's content.
                                </Card.Text>
                                <Button variant="primary">Go somewhere</Button>
                            </Card.Body>
                        </Card>
                    </Col>
                    <Col lg="3" md="6">
                        <Card style={{ width: '18rem' }}>
                            <Card.Body>
                                <Card.Title>Card Title</Card.Title>
                                <Card.Text>
                                    Some quick example text to build on the card title and make up the
                                    bulk of the card's content.
                                </Card.Text>
                                <Button variant="primary">Go somewhere</Button>
                            </Card.Body>
                        </Card>
                    </Col>
                    <Col lg="3" md="6">
                        <Card style={{ width: '18rem' }}>
                            <Card.Body>
                                <Card.Title>Card Title</Card.Title>
                                <Card.Text>
                                    Some quick example text to build on the card title and make up the
                                    bulk of the card's content.
                                </Card.Text>
                                <Button variant="primary">Go somewhere</Button>
                            </Card.Body>
                        </Card>
                    </Col>
                    <Col lg="3" md="6">
                        <Card style={{ width: '18rem' }}>
                            <Card.Body>
                                <Card.Title>Card Title</Card.Title>
                                <Card.Text>
                                    Some quick example text to build on the card title and make up the
                                    bulk of the card's content.
                                </Card.Text>
                                <Button variant="primary">Go somewhere</Button>
                            </Card.Body>
                        </Card>
                    </Col>
                </Row>
            </Container>
        </Container>
    )
}


export default BootstrapPractice;

Here is my App.css:

.row {
  max-width: 1320px;
  margin: auto;
  flex-wrap: wrap;
  display: flex;
}

.cardItems {
  flex-basis: 23%;
  margin: 1%;
  height: 200px;
  background-color: brown;
}

.main {
  max-width: 1320px;
  margin: auto;
  background-color: antiquewhite;
}

Here is my HeaderComponent.js:

import React from 'react'

export default function HeaderComponent() {
    return (
        <div>
            <h1>HeaderComponent</h1>
        </div>
    )
}

And here is my FooterComponent.js:

import React from 'react'

export default function FooterComponent() {
  return (
    <h1>Footer  Component</h1>
  )
}

The output of my code:

The result that I expected it to look like:

1. You should not specify the width: '18rem' to the <Card> when you have specify the <Col> size in different screen size (lg="3" md="6") as this will affect the responsive layout. Otherwise, you should work with Bootstrap auto layout (without specify the grid size) so that it will calculate and render the grid columns accordingly.

<Col>
  <Card style={{ width: '18rem' }}>
    ...
  </Card>
</Col>

2. You should look for Bootstrap Gutter which makes spacing/gap between the columns in the Bootstrap Grid system. From my example below, I am using g-3 so that the columns having the space/gap of 1 rem between the columns.

<Row className="g-3">
  <Col lg="3" md="6">
    <Card style={{}}>
      <Card.Body>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>
          Some quick example text to build on the card title and make up
          the bulk of the card's content.
        </Card.Text>
        <Button variant="primary">Go somewhere</Button>
      </Card.Body>
    </Card>
  </Col>

  ...

</Row>

Demo @ StackBlitz