Fix nested main element issue

assets/css/screen.css

@@ -68,7 +68,7 @@ production stylesheet in assets/built/screen.css
     min-height: 100vh;
 }
 
-.viewport > main {
+.site-content {
     flex-grow: 1;
 }
 

default.hbs

@@ -60,10 +60,10 @@
         </nav>
     </header>
 
-    <main>
+    <div class="site-content">
         {{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
         {{{body}}}
-    </main>
+    </div>
 
     {{!-- The global footer at the very bottom of the screen --}}
     <footer class="site-footer outer">

page.hbs

@@ -7,6 +7,7 @@ into the {body} tag of the default.hbs template --}}
 {{#post}}
 {{!-- Everything inside the #post block pulls data from the page --}}
 
+<main id="site-main" class="site-main">
     <article class="article {{post_class}}">
 
         <header class="article-header gh-canvas">
@@ -39,5 +40,6 @@ into the {body} tag of the default.hbs template --}}
         </section>
 
     </article>
+</main>
 
 {{/post}}

post.hbs

@@ -7,6 +7,7 @@ into the {body} tag of the default.hbs template --}}
 {{#post}}
 {{!-- Everything inside the #post block pulls data from the post --}}
 
+<main id="site-main" class="site-main">
     <article class="article {{post_class}}">
 
         <header class="article-header gh-canvas">
@@ -79,6 +80,7 @@ into the {body} tag of the default.hbs template --}}
         --}}
 
     </article>
+</main>
 
 {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
 {{#unless @member}}

tag.hbs

@@ -2,7 +2,7 @@
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
 
-<section class="outer">
+<main id="site-main" class="site-main outer">
     <div class="inner posts">
         <div class="post-feed">
 
@@ -54,4 +54,4 @@
 
         </div>
     </div>
-</section>
+</main>