diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9e143fa0..11f0cdcf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Code highlight background cut off in Google Chrome when overflowing content area ([#383](https://github.com/jpanther/congo/pull/383))
 - Social icons shift position during CSS transition when hovered in Safari ([#396](https://github.com/jpanther/congo/pull/396))
+- Hamburger navigation menu is misaligned in mobile browsers ([#399](https://github.com/jpanther/congo/pull/399))
 - Error when attempting to resize SVG assets in page bundles ([#427](https://github.com/jpanther/congo/pull/427))
 - Appearance switcher missing `aria-label` ([#438](https://github.com/jpanther/congo/pull/438))
 - Article links missing `alt` text and `aria-label` ([#439](https://github.com/jpanther/congo/pull/439))
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index f2051789..67dc7632 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1020,6 +1020,7 @@ body button {
 /* Hamburger menu */
 
 body:has(#menu-controller:checked) {
+  position: fixed;
   overflow-y: hidden;
 }
 
diff --git a/assets/css/main.css b/assets/css/main.css
index 6c5e70fd..2d7ab691 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -23,7 +23,7 @@ body button {
 
 /* Hamburger menu */
 body:has(#menu-controller:checked) {
-  @apply overflow-y-hidden;
+  @apply fixed overflow-y-hidden;
 }
 #menu-button:has(#menu-controller:checked) {
   @apply invisible;
diff --git a/layouts/partials/header/hamburger.html b/layouts/partials/header/hamburger.html
index c328994c..495d3fbf 100644
--- a/layouts/partials/header/hamburger.html
+++ b/layouts/partials/header/hamburger.html
@@ -14,10 +14,10 @@
         </div>
         <div
           id="menu-wrapper"
-          class="invisible fixed inset-0 z-30 m-auto h-screen w-screen cursor-default overflow-auto bg-neutral-100/50 opacity-0 backdrop-blur-sm transition-opacity dark:bg-neutral-900/50"
+          class="fixed inset-0 z-30 invisible w-full h-full m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
         >
           <ul
-            class="mx-auto flex w-full max-w-7xl list-none flex-col overflow-visible px-6 py-6 ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
+            class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
           >
             <li class="mb-1">
               <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"
diff --git a/layouts/partials/header/hybrid.html b/layouts/partials/header/hybrid.html
index 0800d31a..a284b5cd 100644
--- a/layouts/partials/header/hybrid.html
+++ b/layouts/partials/header/hybrid.html
@@ -14,10 +14,10 @@
         </div>
         <div
           id="menu-wrapper"
-          class="invisible fixed inset-0 z-30 m-auto h-screen w-screen cursor-default overflow-auto bg-neutral-100/50 opacity-0 backdrop-blur-sm transition-opacity dark:bg-neutral-900/50"
+          class="fixed inset-0 z-30 invisible w-full h-full m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
         >
           <ul
-            class="mx-auto flex w-full max-w-7xl list-none flex-col overflow-visible px-6 py-6 ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
+            class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
           >
             <li class="mb-1">
               <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"
@@ -51,7 +51,7 @@
         </div>
       </label>
       {{/* Basic menu */}}
-      <ul class="hidden list-none flex-row ltr:text-right rtl:text-left sm:flex">
+      <ul class="flex-row hidden list-none ltr:text-right rtl:text-left sm:flex">
         {{ if .Site.Menus.main }}
           {{ range .Site.Menus.main }}
             <li class="mb-1 sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0">