I am Trying to center the card but its not working - reactjs

Question

I am building a react application in which I am trying to center the blocks,by using justify content center but its not working. I have used the justify-content-center, center -block ,but still its not working
Please Help me out
function Trackers(props) {
return (
<>
<h2 class="font-weight-bold text-center mt-4 mb-4" >COVID-19 TRACKER</h2>
<Container>
<Row >
<Col xs={12} sm={12} md={4} className="center-block">
<Card style={{ width: '15rem' }} className="justify-content-center text-center ml-1 mr-1 mt-1 mb-1" >
<Card.Body>
<h6>Infected</h6>
<h5>{props.data["statewise"][0]["active"]}</h5>
<br />
<h6>No of Active Cases of Covid-19</h6>
<Container className="bg-primary " style={{height:"5px" ,width:"auto"}} height="20px" width="auto" >
</Container>
</Card.Body>
</Card></Col>
<Col xs={12} sm={12} md={4} className="justify-content-center ">
<Card style={{ width: '15rem' }} className="text-center ml-1 mr-1 mt-1 mb-1" >
<Card.Body>
<h6>Recovered</h6>
<h5>{props.data["statewise"][0]["recovered"]}</h5>
<br />
<h6>No of Recovered Cases of Covid-19</h6>
<Container className="bg-success " style={{height:"5px" ,width:"auto"}} height="20px" width="auto" >
</Container>
</Card.Body>
</Card></Col>
<Col xs={12} sm={12} md={4} className="justify-content-center ">
<Card style={{ width: '15rem' }} className="text-center ml-1 mr-1 mt-1 mb-1">
<Card.Body>
<h6>Deaths</h6>
<h5>{props.data["statewise"][0]["deaths"]}</h5>
<br />
<h6>No of Deaths Cases of Covid-19</h6>
<Container className="bg-dark " style={{height:"5px" ,width:"auto"}} height="20px" width="auto" >
</Container>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
</>
);
}
https://i.stack.imgur.com/MqKYV.png

Answer 1

You just need to add class p-0(zero padding) to your Col and then on your Card element replace classes ml-1 mr-1 with just mx-auto (sets the margins on the x-axis, left & right to auto)
https://jsfiddle.net/85nj7tz1/
FYI .justify-content-center is used on a row to center the columns within the row.

Answer 2

The correct answer you already have with mx-auto.
On top of that you can also introduce h-100 on the cards to make them align properly on all screens. With a .card-footer you can align the border layout as well.
DEMO with columns
To take it a little further, you can get rid of the columns and use a card-layout.
A .card-deck seems the ideal approach.
DEMO with card-layout