diff --git a/site/assets/scss/components/_fifty.scss b/site/assets/scss/components/_fifty.scss
index 63f16e8..7561b1d 100644
--- a/site/assets/scss/components/_fifty.scss
+++ b/site/assets/scss/components/_fifty.scss
@@ -1,13 +1,14 @@
 .fifty {
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
 
   > * {
     flex: 1 1 auto;
     margin: $gutter 0;
   }
 
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: 650px) {
     flex-wrap: nowrap;
 
     > * {
diff --git a/site/assets/scss/components/_hero.scss b/site/assets/scss/components/_hero.scss
index 1f12909..99c7bf2 100644
--- a/site/assets/scss/components/_hero.scss
+++ b/site/assets/scss/components/_hero.scss
@@ -4,18 +4,15 @@
   align-content: center;
   align-items: center;
   justify-content: center;
-  margin: 0 0 ($gutter * 2);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
-  padding: 0;
   height: 250px;
 
   h1 {
     flex: 1 1 auto;
     background-color: rgba($blue, 0.75);
     padding: $gutter;
-    width: auto;
     text-align: center;
     color: $copy-light;
   }
@@ -42,20 +39,10 @@
   }
 }
 
-@media screen and (min-width: 426px) {
+@media screen and (min-width: 900px) {
   .hero {
     h1 {
-      flex: 0 0 auto;
-      width: 425px;
-    }
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .hero {
-    h1 {
-      width: calc(100% * 0.809);
-      max-width: 860px;
+      padding: $gutter calc((100% - 850px) / 2);
       text-align: inherit;
     }
   }
diff --git a/site/assets/scss/elements/_layout.scss b/site/assets/scss/elements/_layout.scss
index 8366380..c95e9e5 100644
--- a/site/assets/scss/elements/_layout.scss
+++ b/site/assets/scss/elements/_layout.scss
@@ -2,70 +2,36 @@ body {
   min-width: 300px;
 }
 
-header {
+header,
+main {
   margin: 0;
   padding: 0;
 }
 
+section {
+  margin-bottom: $gutter;
+  padding: $gutter;
+
+  &:nth-of-type(even) {
+    background-color: $light-grey;
+  }
+}
+
 footer {
   margin: 0;
   padding: 0 $gutter;
 }
 
-main {
-  margin: 0 $gutter;
-  padding: 0;
-}
+@media screen and (min-width: 900px) {
 
-section {
-  margin: ($gutter * 2) 0;
-
-  &:nth-of-type(even) {
-    margin-right: -$gutter;
-    margin-left: -$gutter;
-    background-color: $light-grey;
-    padding: $gutter;
-  }
-}
-
-@media screen and (min-width: 426px) {
-  main {
-    margin: 0 auto;
-    width: 100%;
-  }
-
-  footer,
   section {
-    padding: $gutter calc((100% - 425px) / 2);
-
-    &:nth-of-type(even) {
-      padding: $gutter calc(((100% - 425px) / 2) + #{$gutter});
-    }
-  }
-}
-
-@media screen and (min-width: 768px) {
-  footer,
-  main {
-    width: calc(100% * 0.809);
-    max-width: 860px;
+    padding: ($gutter * 2) calc((100% - 850px) / 2);
+    width: 850px;
   }
 
   footer {
-    margin: 0 auto;
-    padding: 0;
-  }
-
-  section {
-    margin: ($gutter * 4) 0;
-    padding: $gutter 0;
-    width: auto;
-
-    &:nth-of-type(even) {
-      margin-right: calc(-100% * 0.809 / 2);
-      margin-left: calc(-100% * 0.809 / 2);
-      padding: ($gutter * 2) calc(100% * 0.809 / 2);
-    }
+    padding: 0 calc((100% - 850px) / 2);
+    width: 850px;
   }
 
 }
diff --git a/site/assets/scss/elements/_typography.scss b/site/assets/scss/elements/_typography.scss
index 54dc332..244c9f5 100644
--- a/site/assets/scss/elements/_typography.scss
+++ b/site/assets/scss/elements/_typography.scss
@@ -10,7 +10,6 @@ h1 {
   @include font-roboto;
   margin: 0 0 ($gutter / 2);
   padding: 8px 0;
-  width: 100%;
   font-size: 40px;
   font-weight: 300;
 }
diff --git a/site/pages/styleguide.hbs b/site/pages/styleguide.hbs
index a66a486..d8a9d09 100644
--- a/site/pages/styleguide.hbs
+++ b/site/pages/styleguide.hbs
@@ -6,53 +6,56 @@
     theme: orange
 ---
 
-<h1>Looking at styling for an h1</h1>
-<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
-<h2>Looking at styling for an h2</h2>
-<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
-<h3>Looking at styling for an h3</h3>
-<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
-<ul>
-  <li>item 1 in unordered list</li>
-  <li>item 2 in unordered list</li>
-  <li>item 3 in unordered list</li>
-  <li>item 4 in unordered list</li>
-  <li>item 5 in unordered list</li>
-</ul>
-<h4>Looking at styling for an h4</h4>
-<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
-<h5>Looking at styling for an h5</h5>
-<p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
-<h6>Looking at styling for an h6</h6>
-<p class="small">Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+<section>
 
-<a class="cta-primary" href="#cta-primary">Do a Thing!</a>
-<a class="cta-secondary" href="#cta-secondary">Do another thing</a>
+  <h1>Looking at styling for an h1</h1>
+  <p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+  <h2>Looking at styling for an h2</h2>
+  <p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+  <h3>Looking at styling for an h3</h3>
+  <p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+  <ul>
+    <li>item 1 in unordered list</li>
+    <li>item 2 in unordered list</li>
+    <li>item 3 in unordered list</li>
+    <li>item 4 in unordered list</li>
+    <li>item 5 in unordered list</li>
+  </ul>
+  <h4>Looking at styling for an h4</h4>
+  <p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+  <h5>Looking at styling for an h5</h5>
+  <p>Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+  <h6>Looking at styling for an h6</h6>
+  <p class="small">Cum sociis natoque penatibus et magnis <a href="#sample-anchor">dis parturient montes</a>, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Duis mollis, est non <i>commodo luctus</i>, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
 
-<h2>Colors</h2>
+  <a class="cta-primary" href="#cta-primary">Do a Thing!</a>
+  <a class="cta-secondary" href="#cta-secondary">Do another thing</a>
 
-<div class="color-samples">
-  <div>
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
+  <h2>Colors</h2>
+
+  <div class="color-samples">
+    <div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
   </div>
-</div>
 
 
-<h2>Code Samples</h2>
-<code>
-  function thing1(thing2) {
-    var thing3 = 'some default value';
-    return thing2 + thing3;
-  }
-</code>
+  <h2>Code Samples</h2>
+  <code>
+    function thing1(thing2) {
+      var thing3 = 'some default value';
+      return thing2 + thing3;
+    }
+  </code>
 
+</section>