diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index e23b967c..9c15dd13 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -37,9 +37,9 @@ export const Header = forwardRef(function Header({ className }, ref) {
       ref={ref}
         className={clsx(
           className,
-          'fixed inset-x-0 top-0 z-40 flex items-center justify-between gap-3 px-5 transition h-[64px] lg:left-72 lg:z-50 lg:px-8 xl:left-80 min-h-[64px] lg:pointer-events-auto',
+          'fixed inset-x-0 top-0 z-40 flex items-center justify-between gap-3 px-5 transition h-[64px] lg:left-[calc(var(--layout-offset)+18rem)] lg:right-[var(--layout-offset)] lg:z-50 lg:px-8 xl:left-[calc(var(--layout-offset)+20rem)] min-h-[64px] lg:pointer-events-auto',
           !isInsideMobileNavigation &&
-            'backdrop-blur-lg bg-white/70 dark:bg-[#181A1D]/95 lg:left-72 xl:left-80',
+            'backdrop-blur-lg bg-white/70 dark:bg-[#181A1D]/95',
           isInsideMobileNavigation &&
             'bg-white/70 dark:bg-[#181A1D]/95 backdrop-blur-lg'
         )}
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 4eefa80c..ba27e134 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -188,12 +188,12 @@ export function Layout({ children, title, tableOfContents }) {
       <AnnouncementBanner />
       <HeroPattern/>
       <div
-        className="relative mx-auto flex max-w-8xl md:px-2 lg:px-8 xl:px-12 lg:ml-72 xl:ml-80"
+        className="relative flex md:px-2 lg:px-8 xl:px-12 lg:ml-[calc(var(--layout-offset)+18rem)] lg:max-w-[calc(var(--layout-max-width)-18rem)] xl:ml-[calc(var(--layout-offset)+20rem)] xl:max-w-[calc(var(--layout-max-width)-20rem)]"
         style={{ paddingTop: bannerHeight }}
       >
         <header
             // layoutScroll
-            className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"
+            className="contents lg:pointer-events-none lg:fixed lg:inset-y-0 lg:left-[var(--layout-offset)] lg:right-[var(--layout-offset)] lg:z-40 lg:flex"
             style={{ top: bannerHeight }}
         >
           <div className="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:dark:border-neutral-700/50 lg:px-6 lg:pb-8 lg:pt-4 lg:bg-white/70 lg:dark:bg-[#181A1D]/95 lg:backdrop-blur-lg xl:w-80 lg:overflow-x-visible sidebar-scroll">
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 8d9e330a..239aabd3 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -14,6 +14,12 @@
   --toastify-text-color-dark: theme('colors.zinc.600') !important;
   --toastify-color-light: theme('colors.white') !important;
   --toastify-text-color-light: theme('colors.zinc.600') !important;
+
+  /* Page frame: sidebar, content and table of contents stay together and the
+     frame is centered, so wide screens get empty space outside the page instead
+     of a gap between the content and the table of contents. */
+  --layout-max-width: 104rem;
+  --layout-offset: max(0px, calc((100% - var(--layout-max-width)) / 2));
 }
 
 /* Dark mode styles */
diff --git a/typography.js b/typography.js
index b5fa59c4..dbc9a345 100644
--- a/typography.js
+++ b/typography.js
@@ -43,7 +43,7 @@ module.exports = ({ theme }) => ({
 
       // Base
       color: 'var(--tw-prose-body)',
-      fontSize: theme('fontSize.sm')[0],
+      fontSize: '0.9375rem',
       lineHeight: theme('lineHeight.7'),
 
       // Layout
@@ -212,7 +212,7 @@ module.exports = ({ theme }) => ({
       },
       h5: {
         color: 'var(--tw-prose-headings)',
-        fontSize: theme('fontSize.sm')[0],
+        fontSize: '0.9375rem',
         ...theme('fontSize.sm')[1],
         fontWeight: '600',
         marginTop: theme('spacing.6'),
@@ -220,7 +220,7 @@ module.exports = ({ theme }) => ({
       },
       h6: {
         color: 'var(--tw-prose-headings)',
-        fontSize: theme('fontSize.sm')[0],
+        fontSize: '0.9375rem',
         ...theme('fontSize.sm')[1],
         fontWeight: '600',
         marginTop: theme('spacing.6'),