Add h4,h5,h6 as suggested by @bootstraponline, fix section padding

Author: lord

source/stylesheets/print.css.scss

@@ -100,11 +100,15 @@ body {
     margin-top: 0;
   }
 
-  h3 {
+  h3, h4 {
     @extend %header-font;
     font-size: 0.8em;
     margin-top: 1.5em;
     margin-bottom: 0.8em;
     text-transform: uppercase;
   }
+
+  h5, h6 {
+    text-transform: uppercase;
+  }
 }

source/stylesheets/screen.css.scss

@@ -240,7 +240,9 @@ html, body {
   z-index: 30;
 
   section {
-    &>h1, &>h2, &>h3, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
+    padding-bottom: 6em;
+
+    &>h1, &>h2, &>h3, &>h4, &>h5, &>h6, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
       margin-right: $examples-width;
       padding: 0 $main-padding;
       @include box-sizing(border-box);
@@ -263,21 +265,14 @@ html, body {
       padding-top: 0.5em;
       padding-bottom: 0.5em;
       border-bottom: 1px solid #ccc;
-      margin-top: 2em;
       margin-bottom: $h1-margin-bottom;
+      margin-top: 0;
       border-top: 1px solid #ddd;
       @include background-image(
         linear-gradient(top, #fff, #f9f9f9)
       );
     }
 
-    // The header at the very top of the page
-    // shouldn't have top margin.
-    // (the div is because of tocify)
-    h1:first-child, div:first-child + h1 {
-      margin-top: 0;
-    }
-
     h2 {
       @extend %header-font;
       font-size: 20px;
@@ -298,14 +293,18 @@ html, body {
       border-top: none;
     }
 
-    h3 {
+    h3, h4, h5, h6 {
       @extend %header-font;
       font-size: 12px;
       margin-top: 2.5em;
       margin-bottom: 0.8em;
       text-transform: uppercase;
     }
 
+    h4, h5, h6 {
+      font-size: 10px;
+    }
+
     hr {
       margin: 2em 0;
       border-top: 2px solid $examples-bg;