"Unneccessary Margin removed, Padding converted into %, meadia query …

…among Svgs added"

index.css

@@ -12,14 +12,13 @@ body{
 
 #logo{
     float:left;
-    margin-left: 140px;
+    margin-left: 3%;
 }
 
 
 ul {
     list-style-type: none;
-    margin-right: 200px;
-    padding: 0;
+    padding-right: 5%;     /*Padding in %*/
     overflow: hidden;
 }
 li {
@@ -38,14 +37,34 @@ li a {
   text-decoration: none;
 }
 
+nav svg {
+  fill: var(white);
+}
+#sidebar-active
+{
+  display: none;
+}
+
 
 #navi a:hover {
   color: #19e68c;
 }
 
+.open-side-button, .close-side-button
+{
+display: none;
+padding: 0 20px;
+}
+
 
-@media (max-width: 1920px) {
-  nav;
+@media (max-width: 1900px) {
+
+nav
+{
+  background: #000;
+  height: 80px;
+  width: 100%;
+}
 
 }
 

index.html

@@ -24,7 +24,17 @@
   </a>
 
 <nav>
-    <ul> 
+  <input type="checkbox" id="sidebar-active">
+  <label for="sidebar-active" class="open-side-button">
+    <svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#5f6368"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
+  </label>
+  <div class="links-container">
+    <label for="sidebar-active" class="close-side-button">
+      <svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#5f6368"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
+    </label>
+  </div>  
+
+  <ul> 
         <li><a href="forum.html">Log in</a></li>               
         <li><a href="forum.html">Sign up</a></li>
         <li><a href="">|</a></li>