Fix style on ingredient details sidebar

views/dashboardPage/sidebars/ingredientDetails.ejs

@@ -45,11 +45,9 @@
 
     <div class="lineBorder editRemove"></div>
 
-    <label class="editRemove">RECIPES:
-        <ul id="ingredientRecipeList"></ul>
-    </label>
+    <label class="editRemove">RECIPES:</label>
 
-    <div class="lineBorder editRemove"></div>
+    <ul id="ingredientRecipeList" class="editRemove"></ul>
 
     <label class="editAdd" id="displayUnitLabel" style="display: none">DISPLAY UNIT:</label>
 

views/dashboardPage/sidebars/sidebars.css

@@ -267,10 +267,14 @@ Ingredient Details
         }
 
     #ingredientRecipeList{
+        /* display: flex;
+        flex-direction: column;
+        align-items: center; */
+        text-align: center;
         list-style: none;
         overflow: auto;
         max-height: 150px;
-        width: 90%;
+        width: 100%;
         margin-left: auto;
     }
 
@@ -279,10 +283,11 @@ Ingredient Details
         padding: 10px;
         border-radius: 5px;
         font-weight: bold;
+        width: 75%;
         background: rgb(240, 252, 255);
         border: 1px solid black;
         cursor: pointer;
-        margin: 1px 0;
+        margin: 1px auto;
     }
 
         #ingredientRecipeList > li:hover{