Test

assets/style.css

@@ -18,11 +18,17 @@
 }
 
 body {
+    display: grid;
+    width: 100%;
+    grid-template-areas: "nav nav nav nav"
+                         "main main main main"
+                         "foot foot foot foot";
+    grid-template-rows: 2fr 1fr 2fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
     align-items: center;
     background: linear-gradient(127deg, var(--secondary-bg), var(--primary-bg)) no-repeat fixed;
     background-size: cover;
     color: var(--primary-text);
-    display: flex;
     flex-direction: column;
     font-family: \'Poppins\', sans-serif;
     height: 100%;
@@ -30,7 +36,20 @@ body {
     min-height: 100vh;
     min-width: 100vw;
     padding: 0;
-    width: 100%;
+}
+
+body > nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 55px;
+    position: relative;
+    z-index: 500;
+    grid-area: nav;
+}
+
+body > footer {
+    grid-area: foot;
 }
 
 header h1 {
@@ -86,13 +105,6 @@ li.navpage_item {
     padding-right: 20px;
 }
 
-nav {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    height: 55px;
-}
-
 nav,
 footer {
     -moz-box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.6);
@@ -208,6 +220,12 @@ ul.navpage_list {
 }
 
 @media (max-width: 1050px) {
+
+    div#articleslist {
+        width: 100vw !important;
+        left: 0 !important;
+    }
+
     #toggle_button {
         display: flex;
     }
@@ -306,11 +324,6 @@ ul.navpage_list {
     text-align: center;
 }
 
-#navbar_container {
-    position: relative;
-    z-index: 500;
-}
-
 #navbar_container,
 #page_container,
 #footer_container {