I am currently learning and trying to build a ecommerce website, but I am stuck in the product page for a while. I am trying to add flex style to the map component that is from a certain data, but it seems like not working.

This is the map component

  const listItems = product_card.map((item) => (
    <div className="card" key={item.id}>
      <section className="card_Container">
        <div className="card_imgBox">
          <SimpleImageSlider
            className="card_img"
            width={400}
            height={300}
            images={item.thumb}
            showBullets={true}
            showNavs={true}
          />
          <div className="card_info">
            <h2>{item.product_name}</h2>
            <p>{item.description}</p>
            <p className="price">
              {item.price}
              <span>{item.currency}</span>
            </p>
          </div>
        </div>
      </section>
    </div>
  ));

And this is the scss for this component.

.card{
    background-color: aqua;
    .card_Container{
        // display: flex;
        // background-color: black;
        .card_imgBox {
            display: flex;
            flex-direction: column;
            text-align: left;
            align-items: center;
            width: 500px;
            height: 500px;
            margin-bottom: 20px;
            margin-left: 2%;
            padding-top: 20px;
            border-radius: 20px;
            background-color: bisque;
            .card_img {
                margin-top: 200px;
           }
        }
    }
}

The result always show me the boxed vertically instead of horizontally. Any helps would be appreciated