How to apply Flex Direction in React

Question

I create a sample web Page using Cards in React, I used React Bootstrap for Cards Here I can't set flex Property.

This is my Component:

import 'bootstrap/dist/css/bootstrap.min.css';
import Card from 'react-bootstrap/Card';
import ListGroup from 'react-bootstrap/ListGroup';
import './Style.css';
import img from  './images/download.jpg'
import Button from 'react-bootstrap/Button';

function MovieList() {
  return (
    <>
    <div id="container">
    <Card style={{ width: '20rem', fontSize: '10px' }} className='box'>
      <Card.Header>
        <Button variant="primary" style={{ width: '6rem', fontSize: '8px' }}>NOW SHOWING</Button>
      </Card.Header>
      <Card.Img variant="top" src={img} />
      <Card.Body className='title'>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>
          Card --->1
        </Card.Text>
      </Card.Body>
      <ListGroup className="list-group-flush">
        <ListGroup.Item>Cras justo odio</ListGroup.Item>
        <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
        <Card.Footer style={{ fontSize: '9px', fontFamily: 'cursive' }}>Awesome</Card.Footer>
      </ListGroup>
     </Card>
    </div>
    
    <div>
    <Card style={{ width: '20rem', fontSize: '10px' }} className='box'>  
              <Card.Header>
                <Button variant="primary" style={{ width: '6rem', fontSize: '8px' }}>NOW SHOWING</Button>
              </Card.Header>
              <Card.Img variant="top" src={img} />
              <Card.Body className='title'>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                  Card --->2
                </Card.Text>
              </Card.Body>
              <ListGroup className="list-group-flush">
                <ListGroup.Item>Cras justo odio</ListGroup.Item>
                <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
              </ListGroup>

              <Card.Footer style={{ fontSize: '9px', fontFamily: 'cursive' }}>Awesome</Card.Footer>

      </Card>
      </div>
      

      <div> 
      <Card style={{ width: '20rem', fontSize: '10px' }} className='box'>
        <Card.Header>
          <Button variant="primary" style={{ width: '6rem', fontSize: '8px' }}>NOW SHOWING</Button>
        </Card.Header>
        <Card.Img variant="top" src={img} />
        <Card.Body className='title'>
          <Card.Title>Card Title</Card.Title>
          <Card.Text>
            Card --->3
          </Card.Text>
        </Card.Body>
        <ListGroup className="list-group-flush">
          <ListGroup.Item>Cras justo odio</ListGroup.Item>
          <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
        </ListGroup>

        <Card.Footer style={{ fontSize: '9px', fontFamily: 'cursive' }}>Awesome</Card.Footer>
</Card></div>
</>
)
}
       
export default MovieList;

Here is CSS Code :

.container{
display: flex;
flex-direction: row;   
flex-wrap: wrap;
}

I Get This type of web Page ,But I don't Want. Web Page which I Get

I used mostly all ways to apply flex Property of Css , But didn't get perfect web Page.

I want ,All Cards show into row form. If AnyOne have any Idea Please Share it!!

Answer 1

I will extend @wouch answer which is "Your <div id="container"> uses an id, so target that in your CSS via #container {} instead of .container {}".

Another minor issue is your container div is ended just after first card, if you want to set flex-direction for both cards then include both cards inside container div.

Thanks.