Clean up typography updates

_sass/base.scss

@@ -31,17 +31,13 @@ dl,
 pre,
 address,
 blockquote,
-.table-wrapper {
-  margin-top: 0.5em;
-}
-
 table,
-p,
 div,
 hr,
 form,
 fieldset,
-noscript {
+noscript
+.table-wrapper {
   margin-top: 0;
 }
 
@@ -51,14 +47,16 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: 1.5em;
+  margin-top: 0;
-  margin-bottom: 0.25em;
+  margin-bottom: 1em;
   font-weight: 500;
   line-height: $body-heading-line-height;
   color: $body-heading-color;
+
 }
 
 p {
+  margin-top: 1em;
   margin-bottom: 1em;
 }
 

_sass/code.scss

@@ -15,6 +15,7 @@ pre.highlight,
 figure.highlight {
   padding: $sp-3;
   margin-bottom: 0;
+  margin-top: 0;
   -webkit-overflow-scrolling: touch;
   background-color: $code-background-color;
 

_sass/content.scss

@@ -8,6 +8,16 @@
 .page-content {
   line-height: $content-line-height;
 
+  ol,
+  ul,
+  dl,
+  pre,
+  address,
+  blockquote,
+  .table-wrapper {
+    margin-top: 0.5em;
+  }
+
   a {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -19,6 +29,12 @@
     padding-left: 1.5em;
   }
 
+  li {
+    .highlight {
+      margin-top: $sp-1;
+    }
+  }
+
   ol {
     list-style-type: none;
     counter-reset: step-counter;
@@ -156,15 +172,22 @@
   h5,
   h6 {
     position: relative;
+    margin-top: 1.5em;
+    margin-bottom: 0.25em;
 
     &:first-child {
+      margin-top: $sp-2;
+    }
+
+    + table,
+    + .table-wrapper,
+    + .code-example,
+    + .highlighter-rouge {
+      margin-top: 1em;
+    }
+
+    + p {
       margin-top: 0;
     }
   }
-  + table,
-  .table-wrapper,
-  .code-example,
-  .highlighter-rouge {
-    margin-top: 1em;
-  }
 }

_sass/typography.scss

@@ -39,12 +39,6 @@ h6,
   color: $grey-dk-200;
 }
 
-li {
-  .highlight {
-    margin-top: $sp-2;
-  }
-}
-
 .text-small {
   @include fs-2;
 }

docs/utilities/layout.md

@@ -79,7 +79,7 @@ This paragraph will have 2rem/32px of padding on the right and left at all scree
 | `.flex-justify-between` | `justify-content: space-between` |
 | `.flex-justify-around`  | `justify-content: space-around`  |
 
-Note any of the `flex-` classes must be used on a parent element that has `d-flex` applied to it.
+_Note: any of the `flex-` classes must be used on a parent element that has `d-flex` applied to it._
 
 ## Vertical Alignment