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;

themes/governance-ecologies/layouts/index.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<section id="home" class="hero">
+<div id="home" class="hero">
     <div class="container">
         <h1>{{ .Params.hero.heading }}</h1>
         <p>{{ .Params.hero.subheading }}</p>
@@ -7,7 +7,7 @@
             <a href="{{ .Params.hero.button_link }}" class="btn">{{ .Params.hero.button_text }}</a>
         </div>
     </div>
-</section>
+</div>
 
 <section id="about" class="bg-light">
     <div class="container">