diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx
index 77d148811826..858a24e39183 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx
@@ -20,7 +20,7 @@ export default function DocPageLayout({children}: Props): JSX.Element {
   const sidebar = useDocsSidebar();
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
   return (
-    <Layout>
+    <Layout wrapperClassName={styles.docsWrapper}>
       <BackToTopButton />
       <div className={styles.docPage}>
         {sidebar && (
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css
index 8b3e52ce13e5..bd1e23dfd80f 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/styles.module.css
@@ -10,10 +10,14 @@
   --doc-sidebar-hidden-width: 30px;
 }
 
+.docPage {
+  width: 100%;
+}
+
+.docsWrapper,
 .docPage,
 .docMainContainer {
   display: flex;
-  width: 100%;
 }
 
 .docSidebarContainer {
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
index 8ee721f9862b..2c908cc05535 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
@@ -77,6 +77,7 @@ export default function DocPage(props: Props): JSX.Element {
       />
       <HtmlClassNameProvider
         className={clsx(
+          // TODO: it should be removed from here
           ThemeClassNames.wrapper.docsPages,
           ThemeClassNames.page.docsDocPage,
           props.versionMetadata.className,