My mongodb reactjs redux project, the product list shows in column view (vertical) not row (horizontal). I'm tired

Question

import { useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux';

// Actions import { listProducts } from '../redux/actions/productActions';

const Home = () => {

const dispatch = useDispatch();
const getProduct = useSelector((state) => state.getProduct);
const { products, loading, error } = getProduct;

useEffect(() => {
    dispatch(listProducts())
}, [dispatch]);

return (
    <div>
        { loading ? <div><Box sx={{ width: '100%' }}>
              <LinearProgress />
              </Box></div>   : error ? <h2>{ error }</h2> : products.map((product) => (
  

        <div className="row center" key={product._id}>
                <a href={`/product/${product._id}`}>
            <div className="card">
                    <img className="medium" src={ product.imageUrl } alt="product" />
                <div className="card-body">
                    <h2>{ product.name }</h2>
                     <Rating rating={product.rating} numReviews={product.numReviews} />
                    <div className="price">
                         &#8358;{ product.price.toLocaleString(undefined, { minimumFractionDigits: 2 }) }
                    </div>
                </div>
            </div>
                </a>
         </div>
         
  ))}
    </div>
)

}