I have created an array data for (title,desc,images,etc...) from one component and want to mapping in another component:

    return (
        <div className={styles.container}>
          {data.map((pizza, i) => ( 
            <>
               <Image src={pizza.imgSrc} key={i} alt="" width="500" height="500" />
            <h1 className={styles.title}>{pizza.title}</h1>
            <span className={styles.price}>{pizza.price}</span>
            <p className={styles.desc}>
          {pizza.desc}
        </p>
        </>
          ))}
      </div>
    );

my container CSS:

.container {
    width: 22%;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

It is rendering only flex-direction: column, I want to render 'row' but nothing happen.

Can someone help me?