Actualmente estoy aprendiendo y tratando de crear un sitio web de comercio electrónico, pero estoy atascado en la página del producto por un tiempo. Estoy tratando de agregar un estilo flexible al componente del mapa que proviene de ciertos datos, pero parece que no funciona.

Este es el componente del mapa.

 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> ));

Y este es el scss para este componente.

 .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; } } } }

El resultado siempre me muestra el recuadro verticalmente en lugar de horizontalmente. Cualquier ayuda sería apreciada