diff --git a/src/components/KeployCloud.js b/src/components/KeployCloud.js
index 1650346c8..e58f393c9 100644
--- a/src/components/KeployCloud.js
+++ b/src/components/KeployCloud.js
@@ -4,7 +4,7 @@ export const KeployCloud = () => {
   return (
     <section
       id="cloud"
-      className="mb-8 mt-12 flex max-w-7xl items-center space-x-6 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 shadow-md"
+      className="mb-8 mt-12 flex max-w-full items-center space-x-6 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 shadow-md"
     >
       <div className="prose prose-orange max-w-3xl text-left">
         <h1 className="text-left">Questions? 🤔💭</h1>
diff --git a/src/theme/DocItem/index.js b/src/theme/DocItem/index.js
index e4fcc886f..21c680b18 100644
--- a/src/theme/DocItem/index.js
+++ b/src/theme/DocItem/index.js
@@ -245,10 +245,10 @@ export default function DocItem(props) {
                 </article>
               </div>
             </article>
-            <div>
+            <div className="px-2 lg:prose-lg md:px-6">
               <KeployCloud />
+              <DocPaginator previous={metadata.previous} next={metadata.next} />
             </div>
-            <DocPaginator previous={metadata.previous} next={metadata.next} />
           </div>
         </div>