Карта в начальной загрузке React

#css #react-bootstrap

Вопрос:

Изображение

Привет, я хочу, чтобы открытка выглядела как на первой картинке, но у меня возникли проблемы с ее центрированием. Есть какие — нибудь предложения, какой тип карты мне следует сделать?

Это то, что я сделал до сих пор… Изображение

 lt;div className="mt-4 mx-5 py-2 px-3"gt;  lt;CardGroup className=""gt;  lt;Card className="me-3" style={{ width: "20rem" }}gt;  lt;Card.Bodygt;  lt;Card.Titlegt;Card Titlelt;/Card.Titlegt;  lt;Card.Subtitle className="mb-2 text-muted"gt;Card Subtitlelt;/Card.Subtitlegt;  lt;Card.Textgt;Some quick example text to build on the card title and make up the bulk of the card's content.lt;/Card.Textgt;  lt;Card.Link href="#"gt;Card Linklt;/Card.Linkgt;  lt;Card.Link href="#"gt;Another Linklt;/Card.Linkgt;  lt;/Card.Bodygt;  lt;/Cardgt;  lt;Card className="me-3" style={{ width: "20rem" }}gt;  lt;Card.Bodygt;  lt;Card.Titlegt;Card Titlelt;/Card.Titlegt;  lt;Card.Subtitle className="mb-2 text-muted"gt;Card Subtitlelt;/Card.Subtitlegt;  lt;Card.Textgt;Some quick example text to build on the card title and make up the bulk of the card's content.lt;/Card.Textgt;  lt;Card.Link href="#"gt;Card Linklt;/Card.Linkgt;  lt;Card.Link href="#"gt;Another Linklt;/Card.Linkgt;  lt;/Card.Bodygt;  lt;/Cardgt;  lt;Card className="me-3" style={{ width: "20rem" }}gt;  lt;Card.Bodygt;  lt;Card.Titlegt;Card Titlelt;/Card.Titlegt;  lt;Card.Subtitle className="mb-2 text-muted"gt;Card Subtitlelt;/Card.Subtitlegt;  lt;Card.Textgt;Some quick example text to build on the card title and make up the bulk of the card's content.lt;/Card.Textgt;  lt;Card.Link href="#"gt;Card Linklt;/Card.Linkgt;  lt;Card.Link href="#"gt;Another Linklt;/Card.Linkgt;  lt;/Card.Bodygt;  lt;/Cardgt;  lt;/CardGroupgt;  lt;/divgt;