Properly responsive & centered navbar

css/style.css

@@ -3,12 +3,35 @@ body {
 }
 
 nav {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: 1fr min-content 1fr;
+    /*flex-direction: row;
+    justify-content: space-between;*/
     align-items: center;
     padding: 12px;
     border-bottom: solid 1px #00000033;
+
+    width: 100%;
+    box-sizing: border-box;
+    overflow-wrap: anywhere;
+}
+
+nav .nav-left {
+    /*justify-content: flex-start;*/
+    justify-self: left;
+    grid-column: 1;
+}
+
+nav .nav-center {
+    /*justify-content: center;*/
+    justify-self: center;
+    grid-column: 2;
+}
+
+nav .nav-right {
+    /*justify-content: flex-end;*/
+    justify-self: right;
+    grid-column: 3;
 }
 
 nav img {
@@ -24,7 +47,7 @@ nav ul {
     flex-direction: row;
 }
 
-nav li a {
+nav a {
     padding: 8px;
     color: #383c3f;
     text-decoration: none;
@@ -36,17 +59,39 @@ nav li a {
     }
     nav li {
         text-align: center;
+        padding: 12px;
     }
-    nav li a {
+    nav a {
         padding: 12px;
     }
 }
 
-nav li a.title {
+nav a.title {
     font-size: 140%;
     font-weight: bold;
 }
 
+nav button.responsive-button {
+    display: none;
+
+    border: none;
+    background: none;
+    cursor: pointer;
+}
+
+nav div.inline {
+    display: flex;
+}
+
+@media screen and (max-width: 600px) {
+    nav button.responsive-button {
+        display: block;
+    }
+    nav ul.responsive-hidden {
+        display: none;
+    }
+}
+
 main div.heading {
     color: #383c3f;
     font-size: 200%;