refactor: replace Box with Container for improved layout consistency in PrerenderProduct and ProductDetailPage components

src/PrerenderProduct.js

@@ -83,13 +83,12 @@ class PrerenderProduct extends React.Component {
         Box,
         { sx: { flexGrow: 1 } },
         React.createElement(
-          Box,
+          Container,
           {
+            maxWidth: "lg",
             sx: {
               p: { xs: 2, md: 2 },
               pb: { xs: 4, md: 8 },
-              maxWidth: "1400px",
-              mx: "auto",
               flexGrow: 1
             }
           },

src/components/ProductDetailPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Box, Typography, CardMedia, Stack, Chip, Button, Collapse } from "@mui/material";
+import { Box, Container, Typography, CardMedia, Stack, Chip, Button, Collapse } from "@mui/material";
 import { Link } from "react-router-dom";
 import parse from "html-react-parser";
 import AddToCartButton from "./AddToCartButton.js";
@@ -601,12 +601,11 @@ class ProductDetailPage extends Component {
     }).format(product.price);
 
     return (
-      <Box
+      <Container
+        maxWidth="lg"
         sx={{
           p: { xs: 2, md: 2 },
           pb: { xs: 4, md: 8 },
-          maxWidth: "1400px",
-          mx: "auto",
           flexGrow: 1
         }}
       >
@@ -1256,7 +1255,7 @@ class ProductDetailPage extends Component {
             </Box>
           </Box>
         )}
-      </Box>
+      </Container>
     );
   }
 }