diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index b8587835b..61d8fcbb7 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="bg-brand-soft">
+<html lang="en" class="bg-smoke-light">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -13,8 +13,8 @@
         <script type="text/javascript" src="/js/prism.js" defer=""></script>
     </head>
     <body class="font-sans font-normal text-slate-darker leading-normal">
-        <div class="h-screen flex">
-            <div class="bg-white w-full max-w-xs flex-none overflow-scroll-y p-8 border-r-2 border-smoke">
+        <div class="min-h-screen">
+            <div class="fixed pin-y pin-l bg-white w-full max-w-xs flex-none overflow-scroll-y p-8 border-r-2 border-smoke">
                 <div class="flex items-center mb-8">
                     <svg class="h-8 w-8 mr-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
                     <span class='text-xl font-semibold'>Tailwind CSS</span>
@@ -170,7 +170,7 @@
                     </div>
                 </nav>
             </div>
-            <div class="bg-smoke-light flex-grow overflow-scroll-y">
+            <div class="ml-80">
                 <div class="px-6 py-8 w-full max-w-xl mx-auto">
                     @yield('body')
                 </div>
diff --git a/docs/tailwind.js b/docs/tailwind.js
index 40b46f7df..33cd52f45 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -241,7 +241,8 @@ module.exports = {
       '8': '2rem',
       '10': '2.5rem',
       '12': '3rem',
-      '16': '4rem'
+      '16': '4rem',
+      '80': '20rem',
     },
     negativeMargin: {
       'px': '1px',
