diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index 54f691edc..6ee1d0884 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -27,8 +27,8 @@
             </div>
         </header>
         <div class="container">
-            <div class="flex">
-                <div class="w-full sm:w-1/4">
+            <div class="flex flex-wrap">
+                <div class="w-full lg:w-1/4">
                     <nav class="py-4 text-light text-base">
                         <div>
                             <p class="mb-4 text-dark-softer text-uppercase tracking-wide text-medium text-sm">Introduction</p>
@@ -75,7 +75,7 @@
                         </div>
                     </nav>
                 </div>
-                <div class="w-full sm:w-3/4">
+                <div class="w-full lg:w-3/4">
                     <div class="p-12 rounded-lg bg-light shadow-2">
                         @yield('body')
                     </div>
diff --git a/docs/source/grid.md b/docs/source/grid.md
index 3ca07b146..332f54e31 100644
--- a/docs/source/grid.md
+++ b/docs/source/grid.md
@@ -7,8 +7,8 @@ title: "Grid"
 
 Basic grid example:
 
-<div class="bg-light-softer text-medium text-sm py-4 mb-6">
-    <div class="text-dark-soft mb-2 px-4 leading-none">.flex.flex-wrap</div>
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
     <div class="flex flex-wrap">
         <div class="w-full md:w-1/3">
             <div class="text-center py-4 bg-dark-softer text-light">
@@ -30,8 +30,8 @@ Basic grid example:
 
 Columns don't need to fill a row:
 
-<div class="bg-light-softer text-medium text-sm py-4 mb-6">
-    <div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-4 leading-none">.flex</div>
     <div class="flex flex-wrap">
         <div class="w-full md:w-1/4">
             <div class="text-center py-4 bg-dark-softer text-light">
@@ -54,8 +54,8 @@ Columns don't need to fill a row:
 
 Columns can be different widths:
 
-<div class="bg-light-softer text-medium text-sm py-4 mb-6">
-    <div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-4 leading-none">.flex</div>
     <div class="flex flex-wrap">
         <div class="w-full md:w-1/4">
             <div class="text-center py-4 bg-dark-softer text-light">
@@ -78,8 +78,8 @@ Columns can be different widths:
 
 Rows can overflow and wrap:
 
-<div class="bg-light-softer text-medium text-sm py-4 mb-6">
-    <div class="text-dark-soft mb-2 px-4 leading-none">.flex.flex-wrap</div>
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-4 leading-none">.flex.flex-wrap</div>
     <div class="flex flex-wrap">
         <div class="w-full md:w-1/3">
             <div class="text-center py-4 bg-dark-softer text-light">
@@ -111,8 +111,8 @@ Rows can overflow and wrap:
 
 Columns can have gutters:
 
-<div class="bg-light-softer text-medium text-sm py-4 mb-6">
-    <div class="text-dark-soft mb-2 px-4 leading-none">.flex.pull-x-4</div>
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-4 leading-none">.flex.pull-x-4</div>
     <div class="flex flex-wrap pull-x-4">
         <div class="flex-none w-full md:w-1/3 px-4">
             <div class="text-center py-4 bg-dark-softer text-light">
@@ -144,8 +144,8 @@ Columns can have gutters:
 
 Column widths can be automatic:
 
-<div class="bg-light-softer text-medium text-sm py-4 mb-6">
-    <div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-4 leading-none">.flex</div>
     <div class="flex flex-wrap">
         <div class="w-1/4 md:flex-fill">
             <div class="text-center py-4 bg-dark-softer text-light">
@@ -177,8 +177,8 @@ Column widths can be automatic:
 
 Fixed width columns are still respected even if a smaller screen has auto column widths:
 
-<div class="bg-light-softer text-medium text-sm py-4 mb-6">
-    <div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-4 leading-none">.flex</div>
     <div class="flex flex-wrap">
         <div class="flex-fill md:w-1/6 md:flex-none">
             <div class="text-center py-4 bg-dark-softer text-light">
@@ -221,8 +221,8 @@ Fixed width columns are still respected even if a smaller screen has auto column
 
 Use margin auto utilities to accomplish offsets:
 
-<div class="bg-light-softer text-medium text-sm py-4 mb-6">
-    <div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
+<div class="bg-light-softer text-medium text-sm mb-6">
+    <div class="text-dark-soft p-4 leading-none">.flex</div>
     <div class="flex flex-wrap">
         <div class="w-full md:w-1/3 md:ml-auto">
             <div class="text-center py-4 bg-dark-soft text-light">