modification

main.css

@@ -24,16 +24,19 @@ html, body{
 .logo{
     height: 100%;
     width: 100%;
+    border: 1px white solid;
+    border-radius: 4px;
+    box-shadow: 1px 1px 1px black;
 }
 
-#nav {
+.nav {
     flex: 9;
     text-align: initial;
     letter-spacing: 2px;
     padding: 10px;
 }
 
-#nav-list {
+.nav-list {
     list-style-type: none;
     margin: 0;
     padding: 0;
@@ -59,14 +62,14 @@ body {
     height: 100%;
 }
 
-#sidebar {
+.sidebar {
     background-color: aquamarine;
     border: 1px solid rgba(0,0,0,.125);
     border-radius: .25rem;
 }
 
 
-#main-body {
+.main-body {
     display: flex;
     flex-direction: row;
     overflow: auto;
@@ -76,7 +79,7 @@ body {
 
 /* content : le cadre de base du centre de notre site
 */
-#content {
+.content {
     background-color: #ffe4bb;
     text-align: left;
     width: 100%;
@@ -89,7 +92,7 @@ body {
 /*Recettes :
     représente le contenue centrale de la page.
 */
-#recettes {
+.recettes {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 10px;
@@ -108,21 +111,33 @@ body {
 
 /*Ici commence le CSS pour la page de chaques recettes */
 
-#recette-content {
+.recette-content {
     display: flex;
-    flex-direction: row;
-}
-#recette-image {
-    background-color: red;
-    flex : 2;
-    aspect-ratio: 1/1;
-    max-height: 225px;
+    flex-direction: column;
 }
 
-#recette-desc {
+.recette-image {
+    background-color: red;
+    aspect-ratio: 1/1;
+    max-height: 225px;
+    max-width: 225px;
+    border: 1px solid white;
+    border-radius: 30px;
+}
+
+.recette-div-image {
+    display: flex;
+    justify-content: center;
+}
+
+.recette-desc {
     padding : 10px;
 }
 
+.recette-title {
+    text-align: center;
+}
+
 /*Footer et son contenue*/
 footer{
     padding: 25px;