Align not center when resize for mobile screen - css

Question

Please help anyone,
3d design Icon size is 219px
When I use the first Div component size 219px is working fine as well as all Cols are attached together in full screen and align center to the mobile screen also
and if I try to use it as the same Div style using Card's content is not able to align properly..... is there any issue with Card component or I missed something somewhere
<div style={{ paddingTop: 50, justifyContent: "center", alignItems: "center", display: "flex", backgroundColor: "red" }}>
<Row>
<Col style={{ width: 219 }}> <Example /></Col>
<Col style={{ width: 219 }}><Example1 /> </Col>
<Col style={{ width: 219 }}><Example1 /></Col>
<Col style={{ width: 219 }}><Example1 /></Col>
<Col style={{ width: 219 }}><Example1 /></Col>
</Row>
</div>
<div style={{ paddingTop: 10, justifyContent: "center", alignItems: "center", display: "flex", backgroundColor: "red" , textAlign:"left"}}>
<Row>
<Col style={{ width: 219 }}>
<Card style={{ width: 219 }}>
<Card.Img variant="top" src={threedcard} />
<Card.Header style={{ textAlign: "center", backgroundColor: "#e0741b", color: "white" }}> 3D DESIGN</Card.Header>
<Card.Body style={{ backgroundColor: "#fff567" }}>
<Card.Text>
We at Hephy, have the finest Designer to make 3d models out of your desired material.
</Card.Text>
<Threed />
</Card.Body>
</Card>
</Col>
<Col style={{ width: 219 }}>
<Card style={{ width: 219 }}>
<Card.Img variant="top" src={eventcard} />
<Card.Header style={{ textAlign: "center", backgroundColor: "#d15950", color: "white" }}> EVENT </Card.Header>
<Card.Body style={{ backgroundColor: "#feece6" }}>
<Card.Text>
Right from employee birthday parties to culture events, we like to add that something extra to the Event to make it grand.
</Card.Text>
<Eventmodal />
</Card.Body>
</Card>
</Col>
<Col style={{ width: 219 }}>
<Card style={{ width: 219 }}>
<Card.Img variant="top" src={decocard} />
<Card.Header style={{ textAlign: "center", backgroundColor: "#dc6372", color: "white" }}>DECORATION</Card.Header>
<Card.Body style={{ backgroundColor: "#fff0f5" }}>
<Card.Text>
At hephy, we understand the emotions of parents and their joy when their Children get married.
</Card.Text>
<Decoration />
</Card.Body>
</Card>
</Col>
<Col style={{ width: 219 }}>
<Card style={{ width: 219 }}>
<Card.Img variant="top" src={promoaddcard} />
<Card.Header style={{ textAlign: "center", backgroundColor: "#31986b", color: "white" }}>PROMO & ADDS</Card.Header>
<Card.Body style={{ backgroundColor: "#b7fbf3" }}>
<Card.Text>
Rather focusing on specific product or services, we focus on your brand as a whole. It enables to increase your growth in many ways.
</Card.Text>
<Promomodal />
</Card.Body>
</Card>
</Col>
<Col style={{ width: 219 }}>
<Card style={{ width: 219 }}>
<Card.Img variant="top" src={festcard} />
<Card.Header style={{ textAlign: "center", backgroundColor: "#3d7867", color: "white" }}>FEST</Card.Header>
<Card.Body style={{ backgroundColor: "#cff6f2" }}>
<Card.Text>
We provide School and College Events. While organizing events, we provide proper arrangements for everything.
</Card.Text>
<Festmodal />
</Card.Body>
</Card>
</Col>
</Row>
</div>

Answer 1

do justify-space-around in parent div