I’m currently learning react. I have a new_card_component.js file for which is used to display data that is read from the data.js file. However in the airbnb.js file which is provided in the index.js file i pass the AirbnbApp module to a section called data-container which has a flex property, however these does display the card components in flex.
My AirBnB.js file:

import "../CSS/airbnb.css";
import AirbnbApp from "./airbnbApp";

function AirBnBPage(){
    return (
        <div>
            <NavBar/>
            <Hero/>
            <section className="data-container">
                <AirbnbApp/>
            </section>
        </div>
    )
}
export default AirBnBPage

my airbnbApp.js file:

import airbnbData  from "./airbnbData";
import NewCard from "./new_card_component";

function AirbnbApp(){
    const cardElements = airbnbData.map(function(cardItem){
        return  <NewCard mainimage={cardItem.coverImage} rating={cardItem.stats.rating} country={cardItem.location} message={cardItem.description} cost={cardItem.price} spots={cardItem.openSpots} review={cardItem.stats.reviewCount}/>
    })
    return(
        <div>
            {cardElements}
        </div>
    )
}
export default AirbnbApp

my new_card_component.js file:

import { FaStar } from "react-icons/fa6";
import "../CSS/airbnb.css";

function NewCard(prop){
    return (
        <div className="card-sub">
            <img src={prop.mainimage} alt="trainer"/>
            <div className="info-group">
                <a href="https://"><FaStar/> {prop.rating} ({prop.review})</a>
                <p>{prop.country}</p>
            </div>  
            <p>{prop.message}</p>
            <div className="info-group">
                <p>Available spots : {prop.spots}   Price : {prop.cost} $</p>
            </div>
        </div>
    )
}

my css file : airbnb.css

.data-container{
    /* background-color: red; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width:1200px;
    margin:0 auto;
    align-items: center;
    justify-content:flex-start;
}
.card-sub{
    margin:25px 0 0;
    width:320px;
    border:2px solid black;
}
.card-sub img{  
    width:220px;
    height: 300px;
    border-radius: 10px;
}
.info-group{
    margin-top:10px;
    display: flex;
    gap:0.7rem;
    margin-left:10px;
}


i tried applying the ``display:flex`` property to the data-container section however these did not solve my problem. It still displays the card components in on its own row, assuming my data.js file had an array with 4 objects inside, it will display the 4 card components each on its own row.