fix code

src/App.css

@@ -129,6 +129,10 @@ nav img{
   object-fit: contain;
  }
 } */ 
+img{
+  max-width: 100%;
+  height: auto;
+}
 .card.card-1{
   background: #41ca6e;
 }
@@ -152,10 +156,10 @@ nav img{
 nav{
   background-color: black;
   width: 100%;
-  padding: .4rem .6rem;
+  padding: 10px 15px;
 }
 nav img{
-  width: 20%;
+  width: 10%;
 }
 main{
   display: flex;
@@ -164,12 +168,12 @@ main{
 }
 .card{
   width: 100%;
-  height: 100%;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 1.7rem;
+  gap: 1rem;
   padding: 2rem;
 }
 
@@ -206,7 +210,12 @@ main{
   margin-block:1rem ;
 }
 
-@media (min-width:500px){
+
+@media (min-width:800px){
+  body {
+    max-width: 1926px;
+    margin:auto; 
+  }
   nav{
     position: fixed;
     background-color: transparent;
@@ -224,19 +233,25 @@ main{
     flex-shrink: 0;
     flex-basis: 400px;
     min-width: 33.3333%;
-    height: 50vh;
+    min-height: 50vh;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-around;
     align-items: center;
+    padding-inline: 1.7rem;
+    padding-block: .6rem;
+    gap: 0;
+  }
+  .card>:nth-child(2){
+    width: auto;
   }
   .card .about{
-    float: left;
-    flex: 200px;
-    padding-inline: 1rem;
+    flex-grow: 1;
+    width: 70%;
+    padding-inline: 2rem;
   }
   .card .about h4{
     text-transform: capitalize;
-    font-size: 18px;
+    font-size: 20px;
     width: 100%;
   }
   .card .about img{

src/App.js

@@ -12,7 +12,7 @@ function App() {
       {
         data.features.map((Element,index)=>{
           return (
-            <Card {...Element} i={index+1} />
+            <Card {...Element} i={index+1} key={index}/>
             )
           })
         }

src/Components/navbar.js

@@ -2,9 +2,9 @@ import React from 'react'
 
 const Navbar = ({imgurl}) => {
   return (
-    <>
+    
     <nav><img src={imgurl}  alt="*logo"/></nav>
-    </>
+    
   )
 }