Fix styling of single recipe display page

views/recipesPage/recipes.css

@@ -8,7 +8,12 @@ h1{
     margin-bottom: 25px;
 }
 
-.container{
+h2{
+    border-bottom: 2px solid #ff626b;
+    margin-bottom: 15px;
+}
+
+#recipes{
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
@@ -31,41 +36,45 @@ h1{
             transform: translateY(-3px);
         }
 
-        h2{
-            border-bottom: 2px solid #ff626b;
-            margin-bottom: 15px;
-        }
+#ingredient{
+    display: none;
+    width: 50%;
+    flex-direction: column;
+    margin: auto;
+    align-items: center;
+}
 
-    #ingredient{
-        display: none;
+    #addButton{
+        max-width: 150px;
+        margin-bottom: 25px;
     }
 
-        th{
-            border: 2px solid #ff626b;
-            background: #001b2d;
-            color: darkgray;
-            padding: 3px;
-            min-width: 150px;
-        }
+    th{
+        border: 2px solid #ff626b;
+        background: #001b2d;
+        color: darkgray;
+        padding: 3px;
+        min-width: 150px;
+    }
 
-        th:nth-of-type(3){
-            border: none;
-            background: none;
-            color: white;
-            min-width: 0;
-            cursor: auto;
-        }
+    th:nth-of-type(3){
+        border: none;
+        background: none;
+        color: white;
+        min-width: 0;
+        cursor: auto;
+    }
 
-        td{
-            border: 1px solid black;
-            text-align: center;
-            padding: 1px 10px;
-        }
+    td{
+        border: 1px solid black;
+        text-align: center;
+        padding: 1px 10px;
+    }
 
-        td:nth-of-type(3n){
-            border: none;
-        }
+    td:nth-of-type(3n){
+        border: none;
+    }
 
-        #delRecipe{
-            display: "none"
-        }
+    #delRecipe{
+        display: "none"
+    }

views/recipesPage/recipes.ejs

@@ -15,7 +15,7 @@
 
         <div id="recipes" class="container"></div>
 
-        <div id="ingredient" class="container">
+        <div id="ingredient" >
             <button id="addButton">Add Ingredient</button>
 
             <table>