How to center a card group with react-bootstrap?

Question

I've juste created a card group on my homepage but I can't center my component CardGroup (see enclosure). This is the sm-mode. But in lg mode I want my cards to be next to each other. In both cases, it should be centered. I tried to add a margin on the CardGroup or a display (flex, wrap) .. Nothing worked ^^ Any ideas? Thanks! there is no CSS on both of them :) HOME

// import react-Bootstrap's component(s)
import {
  CardGroup,
  Row,
  Col,
} from 'react-bootstrap';
import SearchBar from 'src/components/SearchBar';
import EventCard from '../EventCard';

const Home = () => (
  <div>
    <SearchBar />
    <div className="list">
      <Row sm={1} md={2} className="g-4">
        <Col className="card-columns">
          <CardGroup>
            <EventCard />
            <EventCard />
            <EventCard />
          </CardGroup>
        </Col>
      </Row>
    </div>
  </div>
);

export default Home;

EVENT CARD

import './eventCard.scss';
import {
  Card,
  Button,
} from 'react-bootstrap';

const EventCard = () => (
  <Card style={{ width: '18rem' }}>
    <Card.Img variant="top" src="holder.js/100px180" />
    <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>
);

export default EventCard;

Answer 1

try this

.list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

check the dom elements whether these properties are applied else try to add !important since some bootstrap's class override yours.

refer: https://codesandbox.io/s/gallant-haze-6hxg1s?file=/src/App.js