diff --git a/index.html b/index.html
index d69eb16..7e9c4e2 100644
--- a/index.html
+++ b/index.html
@@ -29,42 +29,55 @@ section
     padding:50px;
 }
 
+
 h2
 {
+    display:flex;
+    align-items: center;
+    box-sizing:border-box;
     width:500px;
     margin:0 auto;
-    padding:5px 15px 5px 15px;
+    padding:5px 20px 5px 20px;
     text-align:center;
     text-transform:uppercase;
     font-size:36px;
 }
-h2::before, h2::after
+h2 > span
+{
+    position: relative;
+    flex:1;
+}
+h2 > span:first-child::before, h2 > span:last-child::before
 {
-    display: inline-block;
     content: "⬦";
-    font-size: 61px;
-    line-height: 8px;
-    width: 0px;
+    line-height: 7px;
+    font-size: 60px;
+    text-indent:-37px;
+    display: block;
+    position: absolute;
+    top: -2px;
+    width: 0%;
     height: 5px;
     background: #000;
-    text-align: left;
-    text-indent: -37px;
-    vertical-align: middle;
-    margin-top: -10px;
     transition: width 0.4s;
 }
-h2::before
+h2 > span:first-child::before
 {
-    transform: translateX(-10px)
+    text-align:left;
+    direction:ltr;
+    right: 0;
 }
-h2::after
+h2 > span:last-child::before
 {
-    transform: translateX(10px) rotate(180deg);
+    text-align:right;
+    direction:rtl;
+    left: 0;
 }
-h2[data-spy='true']::before, h2[data-spy='true']::after
+h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-child::before
 {
-    width:100px;
+    width: 100%;
 }
+
 .CTA
 {
     position:relative;
@@ -267,30 +280,12 @@ h2[data-spy='true']::before, h2[data-spy='true']::after
 </head>
 <body>
 
-<style>
-.Filler
-{
-    display: flex;
-    width:50%;
-}
-.Filler::before, .Filler::after
-{
-    content:" ";
-    display:block;
-    height:1em;
-    flex:1;
-    background:red;
-}
-
-</style>
-    <div class="Filler">
-        Random Content
-    </div>
-
     <style>
 nav
 {
     position: fixed;
+    display: flex;
+    flex-direction: column;
     top:50px;
     right: 0px;
     width: 200px;
@@ -300,32 +295,25 @@ nav
     box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
     border-left:10px solid black;
 }
-nav ul
+nav > *
 {
+    flex: 1;
+}
+nav > ul
+{
+    flex:0;
     margin:0;
     padding:0;
     text-align:right;
 }
-nav::before, nav::after
+nav > span
 {
-    content:" ";
-    display:block;
-    width:50px;
-    height:50px;
-    background:black;
-    position:absolute;
-    left:0;
-}
-nav::before
-{
-    top:-25px;
-}
-nav::after
-{
-    bottom:-25px;
+    margin:20px;
+    background:red;
 }
     </style>
     <nav>
+        <span></span>
         <ul>
             <li><a href="#top"  >Top</a></li>
             <li><a href="#order">Order</a></li>
@@ -334,7 +322,9 @@ nav::after
             <li><a href="#specs">Specs</a></li>
             <li><a href="#email">Sign-up</a></li>
         </ul>
+        <span></span>
     </nav>
+    <main>
     <section id="order">
 
         <style>
@@ -397,7 +387,7 @@ nav::after
         </div>
 
 
-        <h2 data-spy="0.2|0.8">Order</h2>
+        <h2 data-spy="0.2|0.8"><span></span><span>Order</span><span></span></h2>
         <h3>Truth For Life</h3>
         <h4>365 Daily Devotionals</h4>
         <h5>by Alistair Begg</h5>
@@ -411,11 +401,11 @@ nav::after
         <span>$10.00 (free shipping)</span>
     </section>
     <section id="video">
-        <h2 data-spy="0.2|0.8">Videos</h2>
+        <h2 data-spy="0.2|0.8"><span></span><span>Videos</span><span></span></h2>
 
     </section>
     <section id="about">
-        <h2 data-spy="0.2|0.8">About</h2>
+        <h2 data-spy="0.2|0.8"><span></span><span>About</span><span></span></h2>
         <p>
             Duis augue neque, dignissim at diam ac, mattis cursus justo. Morbi blandit in ligula eu scelerisque.
             Maecenas hendrerit eu nunc non molestie. Vivamus augue enim, egestas a magna vitae, consequat facilisis urna.
@@ -441,6 +431,7 @@ nav::after
     <section id="email">
         <h2 data-spy="0.2|0.8">Sign Up</h2>
     </section>
+    </main>
 <script>
 Spy.Init();
 function JobDuration(inDuration, inHandler, inDone)
