apply consistent amount of screen padding

components/docs/Wrapper.tsx

@@ -3,7 +3,7 @@ import { FC, ReactNode } from "react";
 const DocWrapper: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <>
-      <article className="prose dark:prose-invert max-w-full pl-80">{children}</article>
+      <article className="prose dark:prose-invert max-w-full pl-80 px-8">{children}</article>
     </>
   );
 };

components/navbar.tsx

@@ -29,11 +29,11 @@ const Navbar = () => {
 
   return (
     <nav
-      className={`px-2 sm:px-4 py-2.5 transition-colors bg-base-light dark:bg-base-dark bg-opacity-50 dark:bg-opacity-50  ${
+      className={`py-2.5 transition-colors bg-base-light dark:bg-base-dark bg-opacity-50 dark:bg-opacity-50  ${
         scrollTop != 0 ? "backdrop-blur-md dark:backdrop-blur-md" : ""
       } fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600`}
     >
-      <div className="container flex flex-wrap justify-between items-center mx-auto max-w-7xl">
+      <div className="container flex flex-wrap justify-between items-center mx-auto max-w-7xl px-8">
         <Link href="/">
           <a className="flex items-center gap-2">
             <Image src="/svg/crystal-logo.svg" width={35} height={35} alt="" />

pages/docs/[[...slug]].tsx

@@ -139,7 +139,7 @@ const DocPage: FC<{ source: MDXRemoteSerializeResult; tree: TreeItem }> = ({
 }) => {
   return (
     <>
-      <div className="pt-28 md:pt-40">
+      <div className="pt-28 max-w-7xl mx-auto md:pt-24">
         <aside className="flex fixed align-top right-auto w-80 px-8 flex-col break-normal">
           <TreeNode node={tree} path="/docs" />
         </aside>