Centered product grid on /products

src/component/ProductGrid.jsx

@@ -19,7 +19,7 @@ export default function ProductGrid({ productData }) {
   useEffect(() => fetchProducts(), []);
 
   return (
-    <div>
+    <div class="container flex-column d-flex justify-content-center">
       <div className="container mt-3 d-flex justify-content-between align-items-center">
         <h1 id="title" className="text-center">
           Inventory
@@ -28,7 +28,7 @@ export default function ProductGrid({ productData }) {
           + New Product
         </Link>
       </div>
-      <Container id="prod-grid" className="mt-3">
+      <Container id="prod-grid" className="mt-3 mx-auto">
         <Row xs={1} sm={2} md={3} lg={4}>
           {products.map((product) => {
             return (