diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 7e1030f4..3d66d791 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -44,7 +44,7 @@ export default function DocItemLayout({ children }: Props): ReactNode {
   const docTOC = useDocTOC()
   const { metadata } = useDoc()
   return (
-    <div className="row">
+    <div className={clsx("row", styles.docLayoutRow)}>
       <div className={clsx("col", !docTOC.hidden && styles.docItemCol)}>
         <ContentVisibility metadata={metadata} />
         <DocVersionBanner />
diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css
index a89053ed..c73ce0d6 100644
--- a/src/theme/DocItem/Layout/styles.module.css
+++ b/src/theme/DocItem/Layout/styles.module.css
@@ -22,6 +22,19 @@
   padding-right: 180px;
 }
 
+.docLayoutRow {
+  justify-content: center;
+}
+
+.docItemCol {
+  box-sizing: border-box;
+  flex: 0 1 1000px !important;
+  max-width: 1000px !important;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 @media (max-width: 800px) {
   .contentHeader {
     position: static;
@@ -38,8 +51,16 @@
   }
 }
 
-@media (min-width: 997px) {
+@media (min-width: 768px) {
+  .docItemCol {
+    padding-left: 3rem !important;
+    padding-right: 3rem !important;
+  }
+}
+
+@media (max-width: 767px) {
   .docItemCol {
-    max-width: 75% !important;
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
   }
 }