diff --git a/assets/styles.css b/assets/styles.css
index 4a6f4c8..4a34b36 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -40,11 +40,6 @@ body {
   border-radius: 50%;
 }
 
-.container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
 
 .disabledButton {
   background-color: #d8d8d8;
@@ -97,12 +92,18 @@ p {
   font-size: 22px;
 }
 
-.product {
+.product-display {
   display: flex;
   flex-direction: column;
   padding: 1rem;
 }
 
+.product-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
 .product-image,
 .product-info {
   width: 50%;
diff --git a/components/ProductDisplay.js b/components/ProductDisplay.js
index 3af6bb2..b764ac1 100644
--- a/components/ProductDisplay.js
+++ b/components/ProductDisplay.js
@@ -8,9 +8,9 @@ app.component('product-display', {
   template:
     /*html*/
     `
-   <div class="product">
+   <div class="product-display">
         
-    <div class="container">
+    <div class="product-container">
       <div class="product-image">
         <img :src="image" />
       </div>
@@ -39,12 +39,12 @@ app.component('product-display', {
           >
         Add to cart
         </button>
-
       </div>
-
-        <review-list :reviews="reviews"></review-list>
-        <review-form @review-submitted="addReview" ></review-form>
     </div>
+
+    <review-list :reviews="reviews"></review-list>
+    <review-form @review-submitted="addReview" ></review-form>
+  </div>
    `,
   data() {
     return {