diff --git a/docs-orange/_includes/boostwatch/tables.html b/docs-orange/_includes/boostwatch/tables.html
index be54e9aee3..c6e48cf791 100644
--- a/docs-orange/_includes/boostwatch/tables.html
+++ b/docs-orange/_includes/boostwatch/tables.html
@@ -248,34 +248,34 @@ <h3>Icons table</h3>
     <thead>
         <tr>
             <th>Name</th>
-            <th style="text-align: center;">Column heading</th>
-            <th style="text-align: center;">Column heading</th>
-            <th style="text-align: center;">Column heading</th>
+            <th class="text-xs-center">Column heading</th>
+            <th class="text-xs-center">Column heading</th>
+            <th class="text-xs-center">Column heading</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <th>Item 1</th>
-            <td style="text-align: center;">
+            <td class="text-xs-center">
                 <span class="icon-tick" style="color: #32C832;"></span>
                 <span class="sr-only">checked</span>
             </td>
-            <td style="text-align: center;">
+            <td class="text-xs-center">
                 <span class="icon-tick" style="color: #32C832;"></span>
                 <span class="sr-only">checked</span>
             </td>
-            <td style="text-align: center;">
+            <td class="text-xs-center">
                 <span class="icon-tick" style="color: #32C832;"></span>
                 <span class="sr-only">checked</span>
             </td>
         </tr>
         <tr>
             <th>Item 2</th>
-            <td style="text-align: center;">
+            <td class="text-xs-center">
                 <span class="icon-tick" style="color: #32C832;"></span>
                 <span class="sr-only">checked</span>
             </td>
-            <td style="text-align: center;">
+            <td class="text-xs-center">
                 <span class="icon-tick" style="color: #32C832;"></span>
                 <span class="sr-only">checked</span>
             </td>
@@ -283,7 +283,7 @@ <h3>Icons table</h3>
         </tr>
         <tr>
             <th>Item 3</th>
-            <td style="text-align: center;">
+            <td class="text-xs-center">
                 <span class="icon-tick" style="color: #32C832;"></span>
                 <span class="sr-only">checked</span>
             </td>
diff --git a/docs-orange/assets/scss/_boosted-docs.scss b/docs-orange/assets/scss/_boosted-docs.scss
index a250ed66a2..438b056208 100644
--- a/docs-orange/assets/scss/_boosted-docs.scss
+++ b/docs-orange/assets/scss/_boosted-docs.scss
@@ -3,7 +3,7 @@
   color: #fff;
   border: none;
   border-top: 2px solid $gray-dark;
-  padding-top: 2.5rem;
+  padding: 2.5rem .625rem;
   background-image: none;
 
   .lead {
@@ -45,7 +45,7 @@
   background-color: #000;
   color: #fff;
   border-top: 2px solid $gray-dark;
-  padding: 0 0 1.25rem;
+  padding: 0;
 
   h1 {
     font-size: $font-size-h1;
@@ -55,6 +55,7 @@
 
   p {
     font-size: $font-size-base;
+    margin-bottom: 1.25rem;
   }
 
   @include media-breakpoint-down(xs) {