diff --git a/lib/core/DocsLayout.js b/lib/core/DocsLayout.js
index d859e6b3532e..a7522c83e2f8 100644
--- a/lib/core/DocsLayout.js
+++ b/lib/core/DocsLayout.js
@@ -66,7 +66,7 @@ class DocsLayout extends React.Component {
         metadata={metadata}>
         <div className="docMainWrapper wrapper">
           <DocsSidebar metadata={metadata} />
-          <Container className="mainContainer">
+          <Container className="mainContainer docMainContainer">
             <DocComponent
               metadata={metadata}
               content={content}
@@ -116,7 +116,7 @@ class DocsLayout extends React.Component {
               )}
           </Container>
           {hasOnPageNav && (
-            <nav className="onPageNav">
+            <nav className="onPageNav docOnPageNav">
               <OnPageNav rawContent={content} />
             </nav>
           )}
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 322673ebd2af..0285279d35f7 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -1489,7 +1489,8 @@ input::placeholder {
 
 @media only screen and (min-width: 1024px) {
   .docMainWrapper {
-    width: 100%;
+    max-width:100% !important ;
+    margin: 0;
   }
 
   .docMainWrapper > * {
@@ -1564,7 +1565,9 @@ input::placeholder {
 
 @media only screen and (min-width: 1024px) {
   .docsNavContainer {
-    flex: 0 0 240px;
+    flex: 1 0 240px;
+    display: flex;
+    justify-content: flex-end;
     height: calc(100vh - 50px);
     position: -webkit-sticky;
     position: sticky;
@@ -1607,7 +1610,7 @@ input::placeholder {
   }
 
   .separateOnPageNav .docsNavContainer {
-    flex: 0 0 240px;
+    flex: 1 0 240px;
   }
 }
 
@@ -1952,6 +1955,11 @@ input::placeholder {
       width: auto;
     }
 
+    .docsNavContainer > :first-child {
+      width: 240px;
+      max-width: 240px;
+    }
+
     .separateOnPageNav.sideNavVisible .navPusher .mainContainer {
       flex: 1 auto;
       max-width: 100%;
@@ -1969,6 +1977,10 @@ input::placeholder {
       top: 90px;
     }
 
+    .docOnPageNav {
+      flex: 1 0 240px;
+    }
+
     .onPageNav > .toc-headings {
       border-left: 1px solid #e0e0e0;
       padding: 10px 0 2px 15px;
@@ -1980,6 +1992,14 @@ input::placeholder {
   }
 }
 
+
+@media only screen and (min-width: 1024px) {
+  .separateOnPageNav.sideNavVisible .navPusher .docMainContainer {
+    flex-basis: 784px;
+    flex-grow: 0;
+  }
+}
+
 /* Blog */
 .blog .wrapper {
   max-width: 1100px;