I was creating a movie information design where information about movies is shown in a card design I was trying to create 9 such cards where they are arranged 3 columns per row but it is displaying in a stack like structure and not in a 3,3 grid view and i could not get perfect spacing between them I did this with react bootstrap Here is the image of how it looks

//import logo from './logo.svg';
import './App.css';
import movie1 from './images/movie1.jpg';
import movie2 from './images/movie2.jpg';
import movie3 from './images/movie3.jpg';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Container, Row, Col, Card} from 'react-bootstrap';

function App() {
  return (
  
    <>
    <Container  fluid style={{marginTop: "20px" ,backgroundColor: "lightblue", display: "flex", justifyContent: "center"}}>
<div classNameName="row row-cols-3 gy-2">
  <div classNameName="col col-sm">
   <div className="card" style={{width: '15rem'}}>
  <img src= {movie1} className="card-img-top" alt="Movie"/>
  <div className="card-body">
    <h5 className="card-title">Card title</h5>
    <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul className="list-group list-group-flush">
    <li className="list-group-item">An item</li>
    <li className="list-group-item">A second item</li>
    <li className="list-group-item">A third item</li>
  </ul>
   </div>
 </div>

 <div classNameName="col">
   <div className="card" style={{width: '15rem'}}>
  <img src= {movie1} className="card-img-top" alt="Movie"/>
  <div className="card-body">
    <h5 className="card-title">Card title</h5>
    <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul className="list-group list-group-flush">
    <li className="list-group-item">An item</li>
    <li className="list-group-item">A second item</li>
    <li className="list-group-item">A third item</li>
  </ul>
   </div>
 </div>



</div>
</Container>
</>

 );
}

export default App;

I tried to change the display to flex and tried to justify the content but it did not change I also tried to add row and row-cols-3 and gx and gy for gutter class but still it remained the same as shown in image