title: My mongodb reactjs redux project, the product list shows in column view (vertical) not row (horizontal). I'm tired
body: <p>import { useEffect } from 'react';
  import { useSelector, useDispatch } from 'react-redux';</p>
  <p>// Actions
  import { listProducts } from '../redux/actions/productActions';</p>
  <p>const Home = () =&gt; {</p>
  <pre><code>const dispatch = useDispatch();
  const getProduct = useSelector((state) =&gt; state.getProduct);
  const { products, loading, error } = getProduct;
  
  useEffect(() =&gt; {
      dispatch(listProducts())
  }, [dispatch]);
  
  return (
      &lt;div&gt;
          { loading ? &lt;div&gt;&lt;Box sx={{ width: '100%' }}&gt;
                &lt;LinearProgress /&gt;
                &lt;/Box&gt;&lt;/div&gt;   : error ? &lt;h2&gt;{ error }&lt;/h2&gt; : products.map((product) =&gt; (
    
  
          &lt;div className=&quot;row center&quot; key={product._id}&gt;
                  &lt;a href={`/product/${product._id}`}&gt;
              &lt;div className=&quot;card&quot;&gt;
                      &lt;img className=&quot;medium&quot; src={ product.imageUrl } alt=&quot;product&quot; /&gt;
                  &lt;div className=&quot;card-body&quot;&gt;
                      &lt;h2&gt;{ product.name }&lt;/h2&gt;
                       &lt;Rating rating={product.rating} numReviews={product.numReviews} /&gt;
                      &lt;div className=&quot;price&quot;&gt;
                           &amp;#8358;{ product.price.toLocaleString(undefined, { minimumFractionDigits: 2 }) }
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
                  &lt;/a&gt;
           &lt;/div&gt;
           
    ))}
      &lt;/div&gt;
  )
  </code></pre>
  <p>}</p>