Adjusted text positioning on top of landing page

static/css/main.css

@@ -150,13 +150,16 @@ header {
 
 /* Hero Section */
 .hero {
-  min-height: 80vh;
+  height: calc(100vh - 80px); /* Subtract approximate header height */
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   text-align: center;
-  padding: 4rem 0;
+  padding: 10vh 0 0 0;
+  margin: 0;
+  position: relative;
+  box-sizing: border-box;
 }
 
 .hero h1 {
@@ -175,6 +178,12 @@ section {
   padding: 4rem 0;
 }
 
+#about {
+  position: relative;
+  margin-top: 0;
+  padding-top: 2rem;
+}
+
 .section-heading {
   text-align: center;
   margin-bottom: 3rem;