diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index b8db801c667..682f9931ef3 100644
--- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -148,12 +148,12 @@ export function SidebarRouteTree({
                 {index !== 0 && (
                   <li
                     role="separator"
-                    className="mt-4 mb-2 ml-5 border-b border-border dark:border-border-dark"
+                    className="mt-4 mb-2 mx-5 lg:mr-0 border-b border-border dark:border-border-dark"
                   />
                 )}
                 <h3
                   className={cn(
-                    'mb-1 text-sm font-bold ml-5 text-tertiary dark:text-tertiary-dark',
+                    'mb-1 text-sm font-bold mx-5 lg:mr-0 text-tertiary dark:text-tertiary-dark',
                     index !== 0 && 'mt-2'
                   )}>
                   {sectionHeader}
diff --git a/src/components/Layout/SidebarNav/SidebarNav.tsx b/src/components/Layout/SidebarNav/SidebarNav.tsx
index 7e242319c16..e38cc2a864e 100644
--- a/src/components/Layout/SidebarNav/SidebarNav.tsx
+++ b/src/components/Layout/SidebarNav/SidebarNav.tsx
@@ -31,7 +31,7 @@ export default function SidebarNav({
 
   return (
     <div className={cn('sticky top-0 lg:bottom-0 lg:h-screen flex flex-col')}>
-      <div className="overflow-y-scroll no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
+      <div className="overflow-y-overlay no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
         <aside
           className={cn(
             `lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-10 hidden lg:block`
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index 3a9a29b68e8..6cfd661e9ec 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -290,7 +290,7 @@ export default function TopNav({
         {isOpen && (
           <div
             ref={scrollParentRef}
-            className="overflow-y-scroll isolate no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
+            className="overflow-y-overlay isolate no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
             <aside
               className={cn(
                 `lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-50`,
@@ -302,7 +302,7 @@ export default function TopNav({
                 className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-4 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
                 {/* No fallback UI so need to be careful not to suspend directly inside. */}
                 <Suspense fallback={null}>
-                  <div className="pl-3 xs:pl-5 xs:gap-0.5 xs:text-base overflow-x-scroll flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
+                  <div className="px-5 lg:pl-3 lg:pr-0 xs:gap-0.5 xs:text-base flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
                     <NavItem isActive={section === 'learn'} url="/learn">
                       Learn
                     </NavItem>
@@ -322,7 +322,7 @@ export default function TopNav({
                   </div>
                   <div
                     role="separator"
-                    className="ml-5 mt-4 mb-2 border-b border-border dark:border-border-dark"
+                    className="mx-5 lg:mr-0 mt-4 mb-2 border-b border-border dark:border-border-dark"
                   />
                   <SidebarRouteTree
                     // Don't share state between the desktop and mobile versions.
diff --git a/src/styles/index.css b/src/styles/index.css
index 95285ee449f..4e430f70bad 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -195,6 +195,7 @@
   html.dark .no-bg-scrollbar {
     scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
   }
+
   /*
    * Until then, we have ... this.
    * If you're changing this, make sure you've tested:
@@ -233,6 +234,16 @@
   html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
     background-color: rgba(255, 255, 255, 0.35) !important;
   }
+
+  /*
+  * 'overlay' is a deprecated value, but works with the .no-bg-scrollbar solution
+  * so the scrollbar width doesn't offset the containing element's width.
+  * We can go back to using 'scroll' when .no-bg-scrollbar is no longer needed.
+  */
+  html .overflow-y-overlay {
+    overflow-y: scroll; /* For Firefox. */
+    overflow-y: overlay; /* For WebKit-based browsers. */
+  }
 }
 
 .code-step * {