diff --git a/.DS_Store b/.DS_Store
index d7e66ca..7f63681 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/about2.html b/about2.html
index 3597322..56ce31e 100644
--- a/about2.html
+++ b/about2.html
@@ -93,7 +93,7 @@ <h5 class="modal-title" id="exampleModalLabel">Login</h5>
     <img src = "./images/hand-water.jpg" width="100%" height="auto" alt="hand-water.jpg"/>
     <!-- issues with max-width -->
     <section class="title-bg"> <!-- adding a background to the border-->
-        <div class="d-flex container justify-content-center">
+        <div class="container text-center">
             <section class="row-fluid"><!-- added white colored text, but I want our story to be centered-->
                     <h1 class="display-5">OUR STORY</h1>
                     <h5><b>GREEN TEA HERITAGE</b></h5>
@@ -116,7 +116,7 @@ <h1>Founder</h1>
                 </p>
             </div>
             <div class="col">
-                <img src="./images/mingyuSmiling.jpg" width="auto" height="400">
+                <img src="./images/mingyuSmiling.jpg" width="auto" height="400" alt="mingyuSmiles.jpg">
             </div>
         </div>
     </div>
diff --git a/contact2.html b/contact2.html
index 361959b..6e626be 100644
--- a/contact2.html
+++ b/contact2.html
@@ -81,20 +81,36 @@ <h5 class="modal-title" id="exampleModalLabel">Login</h5>
     </nav>
 </header>
 <body class="bg-color">
-    <div class="container my-5">
-        <h1 class="display-5"><center>Contact Us</center></h1>
+    <div class="container">
+    <h1 class="display-5 text-center">Contact Us</h1>
     </div>
-    <div class="container-fluid center-form">
+    <div class="d-flex container justify-content-center text-center">
         <div class="row">
-            <div class="col contact-form">
-                <form method = "get"> <!--extremely necessary for input forms-->
-                    <label for = "name"> Name: </label> <br>
-                    <input type = "text" id = "name" name = "name"/> <br>
-            
-                    <label for ="Message">Message: </label><br>
-                    <textarea rows = "4" cols = "30" id ="msg" name ="msg"></textarea> <br>
-                    <center><input type = "Submit" value = "Submit"/></center>
-                </form>
+            <div class="col">
+                <div class="mb-3">
+                    <div class="mb-3">
+                        <form method="get">
+                        <label for="name" class="form-label mb-2">Name: </label>
+                        <input
+                            type="text"
+                            class="form-control"
+                            name=""
+                            id=""
+                            aria-describedby="helpId"
+                            placeholder=""
+                        />
+
+                        <label for ="Message" class="mt-2">Message: </label><br>
+                        <textarea class="mt-2"rows = "4" cols = "30" id ="msg" name ="msg"></textarea> <br>
+                        <input class="btn btn-light mt-3" type = "Submit" value = "Submit"/>
+                        </form>
+                        <small id="helpId" class="form-text text-muted">Any questions, contact us!</small>
+
+                        
+                    </div>
+                    
+                </div>
+                
             </div>
         </div>
     </div>
diff --git a/index.html b/index.html
index 8279870..0138858 100644
--- a/index.html
+++ b/index.html
@@ -88,9 +88,10 @@ <h5 class="modal-title" id="exampleModalLabel">Login</h5>
 <body class="background bg-color"> <!-- setting entire background color-->
     <div class="container justify-content-end text-end">
         <p class="display-5" style="color: white;"> Welcome to <br> Innisfree <br> Skincare.</p>
+    
+        <a class="btn btn-primary" href="./about2.html" role="button">
+            [add logo] Come In
+        </a>
     </div>
-    <a class="btn btn-primary" href="./about2.html" role="button">
-        [add logo] Come In
-    </a>
 </body>
 </html>
\ No newline at end of file
diff --git a/products2.html b/products2.html
index b011e37..3cbc234 100644
--- a/products2.html
+++ b/products2.html
@@ -117,7 +117,7 @@ <h5> [insert product name] </h5>
                 </div>
             </div>
             <div class="col"><!-- product 2 here-->
-                <div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
+                <div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
                     <div class="card text-center"> <!-- need to make the text centered-->
                         <img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
                         <div class="card-body">
@@ -131,7 +131,7 @@ <h5> [insert product name] </h5>
                 </div>
             </div>
             <div class="col"><!-- product 3 here-->
-                <div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
+                <div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
                     <div class="card text-center"> <!-- need to make the text centered-->
                         <img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
                         <div class="card-body">
@@ -152,7 +152,7 @@ <h5> [insert product name] </h5>
         <div class="row row-cols-sm-1
         row-cols-lg-3"><!-- shows 1 cols per row in small viewport, 3 in lg viewport-->
             <div class="col"><!-- product 4 here-->
-                <div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
+                <div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
                     <div class="card text-center"> <!-- need to make the text centered-->
                         <img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
                         <div class="card-body">
@@ -166,7 +166,7 @@ <h5> [insert product name] </h5>
                 </div>
             </div>
             <div class="col"><!-- product 5 here-->
-                <div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
+                <div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
                     <div class="card text-center"> <!-- need to make the text centered-->
                         <img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
                         <div class="card-body">
@@ -180,7 +180,7 @@ <h5> [insert product name] </h5>
                 </div>
             </div>
             <div class="col"><!-- product 6 here-->
-                <div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
+                <div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
                     <div class="card text-center"> <!-- need to make the text centered-->
                         <img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
                         <div class="card-body">
@@ -201,7 +201,7 @@ <h5> [insert product name] </h5>
         <div class="row row-cols-sm-1
         row-cols-lg-3"><!-- shows 1 cols per row in small viewport, 3 in lg viewport-->
             <div class="col"><!-- product 7 here-->
-                <div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
+                <div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
                     <div class="card text-center"> <!-- need to make the text centered-->
                         <img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
                         <div class="card-body">
@@ -215,7 +215,7 @@ <h5> [insert product name] </h5>
                 </div>
             </div>
             <div class="col"><!-- product 8 here-->
-                <div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
+                <div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
                     <div class="card text-center"> <!-- need to make the text centered-->
                         <img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
                         <div class="card-body">
@@ -229,7 +229,7 @@ <h5> [insert product name] </h5>
                 </div>
             </div>
             <div class="col"><!-- product 9 here-->
-                <div class="wrapper mx-5 mt-5"><!-- m is for margin, x sets left and right, y sets up and down-->
+                <div class="wrapper mx-5 mt-5 mb-3"><!-- m is for margin, x sets left and right, y sets up and down-->
                     <div class="card text-center"> <!-- need to make the text centered-->
                         <img class= "img-resize" src = "./images/mingyu.jpg" alt="img.jpg"/>
                         <div class="card-body">
diff --git a/styles.css b/styles.css
index 2930cb2..38f51c1 100644
--- a/styles.css
+++ b/styles.css
@@ -35,35 +35,17 @@ aside button{
 }
 
 
-.center {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
-
 /* title of each product */
 figure > h5{
     text-align: center;
 }
 
-.center-form{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-}
 
 .form-text{
     color:black;
 }
 
 
-.contact-form{
-    background-color:rgb(115, 166, 185);
-    padding: 20px;
-    border-radius: 5px;
-    max-width: 100%;
-}
 
 
 /* all these are for products page */
