Added Heading to products page

src/component/ProductGrid.jsx

-import React from 'react'
-import Product from './Product.jsx'
-import { Col, Container, Row } from 'react-bootstrap';
-import './../styles/ProductGrid.css'
-export default function ProductGrid({productData}) {
-	
-	return (
-		//uses react bootstrap components
-		<Container id="prod-grid"  >
-		<Row xs={1} sm={2} md={3} lg={4}>
-		{productData.map((product) => {
-			return (
-				<Col key={product.sku}>
-				<Product product={product}/>
-				</Col>
-				)
-			})}
-			</Row>
-			</Container>
-			
-			//uses vanilla bootstrap
-			// <div>
-			//   	<h1 id="title">Inventory</h1>
-			// 	<div className="container" id="prod-grid"  >
-			// 	<div className="row row-cols-4">
-			// 		{productData.map((product) => {
-			// 			return (
-			// 					<div className="col" key={product.sku}>
-			// 						<Product product={product}/>
-			// 					</div>
-			
-			// 			)
-			// 		})}
-			// 		</div>
-			// 	</div>   
-			// </div>
-			)
-		}
-		
\ No newline at end of file
+import React from "react";
+import Product from "./Product.jsx";
+import { Col, Container, Row } from "react-bootstrap";
+import "./../styles/ProductGrid.css";
+export default function ProductGrid({ productData }) {
+  return (
+    <div>
+      <h1 id="title" className="text-center" >Inventory</h1>
+      <Container id="prod-grid" className="mt-3">
+        <Row xs={1} sm={2} md={3} lg={4}>
+          {productData.map((product) => {
+            return (
+              <Col key={product.sku}>
+                <Product product={product} />
+              </Col>
+            );
+          })}
+        </Row>
+      </Container>
+    </div>
+
+    //uses vanilla bootstrap
+    // <div>
+    //   	<h1 id="title">Inventory</h1>
+    // 	<div className="container" id="prod-grid"  >
+    // 	<div className="row row-cols-4">
+    // 		{productData.map((product) => {
+    // 			return (
+    // 					<div className="col" key={product.sku}>
+    // 						<Product product={product}/>
+    // 					</div>
+
+    // 			)
+    // 		})}
+    // 		</div>
+    // 	</div>
+    // </div>
+  );
+}