How to adjust the row space between the two cards using react bootstrap

Question

I am trying to create a 2 * 2 card view with height:"100px" and width:"18rem" I am getting the expected output but the issue raises when I am using custom width.. the problem is the space between the two cards(row space) is wide. Without custom width I am getting correct space(row space). below is my code. I have attached both images which is having row space and without row space. I need to reduce the card space when I am using custom width. I have tried style to Row but that is collapsing my total design. Any input how to resolve this issue? Thanks in advance!

  <Container>
      <Row className="justify-content-between">
        {cardsData.map((card, index) => (
          <Col md={6} key={index} className="mb-3">
            {/* Added mb-3 class to reduce the margin bottom */}
            <Card style={{ width: "18rem" }}> //If I am not using this custom Wdith size the (row spcae) between the cards will not be wide
              <Card.Body>
                <Card.Title>{card.title}</Card.Title>
                <Card.Text>{card.content}</Card.Text>
              </Card.Body>
            </Card>
          </Col>
        ))}
      </Row>
    </Container>