Fix style on recipe page

views/dashboardPage/dashboard.css

@@ -159,7 +159,6 @@ body{
     align-items: center;
     height: 100%;
     box-sizing: border-box;
-    padding-right: 100px;
 }
 
 #ingredientsStrand > h1{
@@ -252,17 +251,27 @@ body{
 /* Recipe Book Strand */
 #recipeBookStrand{
     display: none;
+    align-items: center;
 }
 
     #recipeHead{
         display: flex;
         justify-content: space-between;
+        width: 100%;
+        align-items: center;
+    }
+
+    #recipeHead svg{
+        margin-right: 5px
     }
 
     #recipeList{
         display: flex;
         flex-direction: column;
+        align-items: center;
+        width: 50%;
         margin-top: 50px;
+        overflow-y: auto;
     }
 
     .recipeItem{
@@ -272,11 +281,9 @@ body{
         background: rgb(240, 252, 255);
         border-radius: 5px;
         padding: 20px 20px;
-        margin-left: 10vw;
-        width: 25vw;
+        width: 90%;
         border: 1px solid gray;
         cursor: pointer;
-        width: 50%;
     }
 
     .recipeItem:hover{

views/shared/shared.css

@@ -109,7 +109,8 @@ form{
     }
 
 .button{
-    display: initial;
+    display: flex;
+    align-items: center;
     background: rgb(255, 99, 107);
     border: none;
     text-decoration: none;