diff --git a/src/client/app/router.ts b/src/client/app/router.ts
index a52f37c7..9212efb7 100644
--- a/src/client/app/router.ts
+++ b/src/client/app/router.ts
@@ -170,7 +170,8 @@ export function useRoute(): Route {
 }
 
 function scrollTo(el: HTMLElement, hash: string, smooth = false) {
-  const pageOffset = document.getElementById('app')!.offsetTop
+  const pageOffset = (document.querySelector('.navbar') as HTMLElement)
+    .offsetHeight
   const target = el.classList.contains('.header-anchor')
     ? el
     : document.querySelector(decodeURIComponent(hash))
diff --git a/src/client/theme-default/composables/activeSidebarLink.ts b/src/client/theme-default/composables/activeSidebarLink.ts
index bae901da..2af89ed3 100644
--- a/src/client/theme-default/composables/activeSidebarLink.ts
+++ b/src/client/theme-default/composables/activeSidebarLink.ts
@@ -36,7 +36,8 @@ export function useActiveSidebarLinks() {
         sidebarLinks.some((sidebarLink) => sidebarLink.hash === anchor.hash)
       ) as HTMLAnchorElement[]
 
-    const pageOffset = document.getElementById('app')!.offsetTop
+    const pageOffset = (document.querySelector('.navbar') as HTMLElement)
+      .offsetHeight
     const scrollTop = window.scrollY
 
     const getAnchorTop = (anchor: HTMLAnchorElement): number =>
diff --git a/src/client/theme-default/styles/layout.css b/src/client/theme-default/styles/layout.css
index ff76131d..040ba2de 100644
--- a/src/client/theme-default/styles/layout.css
+++ b/src/client/theme-default/styles/layout.css
@@ -95,8 +95,8 @@ body {
 }
 
 .theme main {
-  margin-top: var(--header-height);
-  margin-left: var(--sidebar-width);
+  padding-top: var(--header-height);
+  padding-left: var(--sidebar-width);
 }
 
 @media screen and (min-width: 720px) {