diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.js b/packages/docusaurus-theme-classic/src/theme/DocItem/index.js
index 9f7516a4e6..ab764e3795 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/index.js
@@ -102,7 +102,7 @@ function DocItem(props) {
         {permalink && <meta property="og:url" content={siteUrl + permalink} />}
       </Head>
       <div className="padding-vert--lg">
-        <div className="container">
+        <div className={classnames('container', styles.docItemWrapper)}>
           <div className="row">
             <div className={classnames('col', styles.docItemCol)}>
               <div className={styles.docItemContainer}>
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css
index 6003d2c1bf..5f2d8ce851 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css
@@ -28,6 +28,14 @@
   }
 }
 
+@media (min-width: 997px) and (max-width: 1320px) {
+  .docItemWrapper {
+    max-width: calc(
+      var(--ifm-container-width) - 300px - var(--ifm-spacing-horizontal) * 2
+    );
+  }
+}
+
 .tableOfContents {
   display: inherit;
   max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));