Improve overall styles

static/hoa.css

@@ -22,15 +22,12 @@ body {
 }
 .headers {
     font-size: 200%;
-}
-.headers {
-    position: fixed;
-    top: 0px;
     border: 1px solid #999999;
-    border-top: none;
     background-color: #494949;
+    max-width: 100vw;
     width: 750px;
-    height: 99px;
+    height: 100px;
+    margin: -1px auto 0;
 }
 .headers h1, .headers h3 {
     margin-top: 10px;
@@ -42,11 +39,13 @@ h2 {
 .nav {
     list-style: none;
     margin: 0;
+    white-space: nowrap;
 }
 .main {
     max-width: 750px;
     font-family: "Fira Sans";
     font-size: 130%;
+    margin-top: -30px !important;
 }
 .main h4 {
     font-family: "Geo";
@@ -57,7 +56,7 @@ h2 {
     font-size: 180%;
 }
 .main h2 {
-    font-family: "Geo";
+    font-family: "Geo" 0;
     font-size: 220%;
 }
 .main a:link, .main a:visited {
@@ -87,22 +86,17 @@ iframe {
 @media (max-width: 969px) {
     .main {
         margin: 0 auto;
-        padding-top: 108px;
-    }
-    .headers {
-        left: 50%;
-        margin-left: -375px;
     }
     .nav-container {
-        position: fixed;
-        left: 50%;
-        margin-left: -375px;
-        max-width: 750px;
+        position: sticky;
+        max-width: 100vw;
         width: 750px;
-        top: 100px;
+        top: 0;
         height: 40px;
         border: 1px solid #999999;
         background-color: #494949;
+        margin: 0 auto;
+        z-index: 10;
     }
     .nav {
         margin: auto auto;
@@ -130,25 +124,18 @@ iframe {
         height: 59px;
     }
     .nav-container {
-        top: 60px;
         font-size: smaller;
         height: 30px;
         padding-top: 3px;
     }
-    .main {
-        padding-top: 78px;
-    }
     .main > div > h2 {
         padding-top: 100px;
     }
     .nav li a img {
         height: 20px;
     }
-    ul {
-        padding-left: 17px !important;
-    }
 }
-@media (max-width: 390px) {
+@media (max-width: 420px) {
     .nav li {
         margin: 0 4px;
     }
@@ -157,7 +144,6 @@ iframe {
 @media (min-width: 970px) {
     .main {
         margin: 0 0 0 210px;
-        padding-top: 70px;
     }
     .nav {
         position: fixed;
@@ -191,8 +177,7 @@ iframe {
         left: calc(50% - 585px)
     }
     .headers {
-        left: 50%;
-        margin-left: -375px;
+        margin-left: auto;
     }
 }
 ul {