logo fix new attempt

static/navbar.css

@@ -30,6 +30,7 @@ body{
     transition: all 0.2s linear;
     backdrop-filter: blur(5px);
     background: #C6EBE8;
+    align-items: center; /* Ensure vertical alignment */
 }
 .my-nav .icon{
     /* flex-basis: 200px;
@@ -42,9 +43,7 @@ body{
     background-repeat: no-repeat; */
     flex-basis: 200px; /* Make sure this is large enough for the logo */
     height: 100%; /* Ensure the icon container height matches the nav */
-    margin-top: 10px;
-    margin-left: 30px;
-    margin-bottom: 7px;
+    margin: 0 30px; /* Adjust margin to properly position the logo */
     background-image: url(https://static.igem.wiki/teams/5054/logo-kleur.svg);
     background-size: contain; /* Adjust to contain the entire logo */
     background-position: center; /* Center the logo */
@@ -92,6 +91,16 @@ body{
     opacity: 0;
 }
 
+/* Adjust for smaller screens */
+@media screen and (max-width:1130px) {
+    .my-nav .icon {
+        flex-basis: 100px; /* Reduce the width for smaller screens */
+        margin: 0 10px; /* Adjust margins for smaller screens */
+        background-size: contain;
+        background-position: center;
+    }
+}
+
 @media screen and (min-width:1800px){
     .my-navbar>li{
         width: 150px;