Update Index.css

Index.css

@@ -3,6 +3,10 @@
   margin: 0;
   box-sizing: border-box;
 }
+body {
+  max-width: 1920px;
+  margin: 0 auto;
+}
 
 nav {
   position: sticky;
@@ -17,10 +21,10 @@ nav img {
   filter: brightness(0);
 }
 .card {
-  min-height: 50vh;
   width: 100%;
   color: white;
   padding: 7px;
+  min-height: 50vh;
 }
 .logo img {
   max-height: 2rem;
@@ -59,10 +63,14 @@ nav img {
   margin-left: auto;
   margin-right: auto;
   margin-top: 3rem;
+  aspect-ratio: 4/3;
+  object-fit: contain;
+  max-width: 100%;
 }
 .card.card-6 .Img img {
-  max-height: 12rem;
-  margin-left: 2rem;
+  /* max-height: 12rem; */
+  max-width: 13rem;
+  /* margin-left: 2rem; */
 }
 
 p {
@@ -78,6 +86,7 @@ h2 {
 hr {
   margin-top: 2.5px;
   margin-bottom: 2.5px;
+  background-color: white;
 }
 
 @media (min-width: 768px) {
@@ -122,8 +131,7 @@ hr {
   }
 
   .card-6 .Img img {
-    max-height: 150px;
-    max-width: 155px;
+    transform: scale(1/2);
   }
 
   hr {
@@ -152,7 +160,7 @@ hr {
 @media (min-width: 1024px) {
   .main {
     min-width: 100%;
-    min-height: 100vh;
+    max-height: 100vh;
     overflow: hidden;
   }
 
@@ -163,11 +171,12 @@ hr {
   .card {
     float: left;
     width: 33.33%;
-    min-height: 50vh;
+    max-height: 50rem;
   }
 
   .Img img {
-    margin-top: 5.5rem;
+    /* margin-top: 5.5rem; */
+    padding-inline: 2px;
     display: inline-block;
     vertical-align: middle;
   }
@@ -183,8 +192,9 @@ hr {
   }
 
   .card.card-6 .Img img {
-    margin-top: 14rem;
-    /* transform: scale(1.2); */
+    margin-top: 6.5rem;
+    max-height: 245px;
+    max-width: 195px;
   }
   .card.card-2 .Img img {
     margin-top: 5rem;
@@ -192,7 +202,7 @@ hr {
 }
 @media (min-width: 1280px) {
   .card {
-    min-height: 20rem;
+    height: 50vh;
   }
   h2 {
     font-size: 1rem;
@@ -203,6 +213,7 @@ hr {
   }
   .card.card-6 .Img img {
     margin-top: 6.5rem;
-    /* transform: scale(1.2); */
+    max-height: 245px;
+    max-width: 195px;
   }
 }