fixed navbar items alignment as in figma IMGIITRoorkee#1

index.html

@@ -19,14 +19,13 @@
     <div id="rectangle5"></div>
     <div id="rectangle6"></div>
     <div id="header-background"></div>
-    <img src="./resources/images/logo1.svg" id="logo1">
     <i class="fa fa-2x fa-bars" id="bars" onclick="show_hide()"> </i>
     <nav class="nav">
-
+        <img src="./resources/images/logo1.svg" id="logo1">
         <div class="main-nav">
             <ul>
-                <li><a href="./resources/html/aboutus.html">About us</a></li>
-                <li><a href="./resources/html/contactus.html">Contact us</a></li>
+                <li><a href="./aboutus.html">About us</a></li>
+                <li><a href="./contactus.html">Contact us</a></li>
                 <li id="li3"><a id="try" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Try us out</a></li>
 
             </ul>

resources/css/landingpage.css

@@ -1,7 +1,6 @@
 html,
 body {
     margin: 0px;
-    margin-top: 3px;
     width: 100%;
 }
 
@@ -93,48 +92,49 @@ body {
     left: 0px;
     top: 0px;
     z-index: -1;
-    background: rgba(62, 95, 79, 0.4);
     backdrop-filter: blur(32px);
 }
 
 
 nav {
     z-index: 100;
+    background: rgba(62, 95, 79, 0.4);
     display: flex;
     padding: 0% 0%;
     justify-content: space-between;
     align-items: center;
 }
 
 #logo1 {
-    position: absolute;
     padding-left: 20px;
     height: 40px;
     top: 10px;
 }
 
 .main-nav {
     flex: 1;
-    text-align: left;
+    text-align: right;
 }
 
 .main-nav ul {
-    padding-right: 20px;
+    padding-right: 40px;
 }
 
 .main-nav ul li {
     list-style: none;
     display: inline-block;
-    padding: 0px 10px;
+    padding: 0px 20px;
     position: relative;
 }
 
 #li3 {
     list-style: none;
     display: inline-block;
-    padding: 0px 10px;
+    padding: 10px 20px;
+    margin-left: 10px;
     position: relative;
     background: #01AF57;
+    border-radius: 3px;
 }
 
 .main-nav ul li a {