fixed map sizing-display

static/styles.css

@@ -48,26 +48,28 @@ h1::after {
 
 /* Layout */
 #map {
-    width: 100%;
+    width: 100vw;
     height: 100vh;
-    position: static !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1; /* Ensure it is behind other elements */
 }
 
 main {
     margin: 0;
     padding: 0;
-    position: absolute;
+    position: relative;
-    top: 10vh;
+    z-index: 5; /* Ensure it is above the map */
-    left: 0;
     display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
     align-items: center;
-    justify-content: center;
-    /* height: 100vh; */
     width: 100vw;
-    z-index: 5;
+    height: 100vh;
+    overflow: hidden; /* Prevent scrollbars */
 }
 
-
 footer {
     position: fixed;
     bottom: 0;

templates/base.html

@@ -95,7 +95,7 @@
         </div>
         {% endif %}
     {% endwith %}
-    <main class="container-fluid" style="padding-top: 10rem;height: 100vh; width:100vw; z-index: 5; position: static; display: block;">
+    <main class="container-fluid" >
 
         {% block content %}