diff --git a/docs/website/assets/css/main.css b/docs/website/assets/css/main.css
index 604d8bff2..37cbd36eb 100644
--- a/docs/website/assets/css/main.css
+++ b/docs/website/assets/css/main.css
@@ -50,10 +50,6 @@ pre[class*='language-'] {
   @apply font-mono;
 }
 
-.article-content {
-  @apply max-w-3xl pt-1 pb-4 pl-6 pr-6 mx-auto;
-}
-
 h1,
 h2,
 h3,
diff --git a/docs/website/components/Content.vue b/docs/website/components/Content.vue
index 51322bc20..9fa6f537f 100644
--- a/docs/website/components/Content.vue
+++ b/docs/website/components/Content.vue
@@ -1,5 +1,5 @@
 <template>
-  <article class="article-content c-rich-text">
+  <article class="max-w-3xl pt-1 pb-4 pl-6 pr-6 mx-auto c-rich-text">
     <h1 class="page-heading">{{ doc.title }}</h1>
     <div class="my-0">
       <a
diff --git a/docs/website/components/Sidebar.vue b/docs/website/components/Sidebar.vue
index b62ee94bc..de65a2351 100644
--- a/docs/website/components/Sidebar.vue
+++ b/docs/website/components/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidenav pt-4 pb-4">
+  <div class="sidenav sticky pt-4 pb-4">
     <ul class="mt-8">
       <li
         v-for="entry in $store.state.sidebar.menu"
@@ -61,9 +61,7 @@ export default {
 
 <style>
 .sidenav {
-  height: 100%;
-  position: fixed;
-  z-index: 1;
+  top: 7%;
   overflow-x: hidden;
 }
 
diff --git a/docs/website/pages/docs/_.vue b/docs/website/pages/docs/_.vue
index 63f8daed2..bec395f11 100644
--- a/docs/website/pages/docs/_.vue
+++ b/docs/website/pages/docs/_.vue
@@ -7,11 +7,11 @@
         </div>
         <DocumentationDropdown></DocumentationDropdown>
       </div>
-      <div class="md:flex flex-wrap">
-        <div class="md:w-1/4 mt-1">
+      <div class="flex md:flex-wrap">
+        <div class="w-1/4 mt-1">
           <Sidebar></Sidebar>
         </div>
-        <div class="md:w-3/4 mt-1">
+        <div class="w-3/4 mt-1">
           <Content></Content>
         </div>
       </div>