diff --git a/resources/web/style/base_styles.pcss b/resources/web/style/base_styles.pcss
index b1ac2ff4b58ce..0be5cf2f3ff91 100644
--- a/resources/web/style/base_styles.pcss
+++ b/resources/web/style/base_styles.pcss
@@ -1,3 +1,18 @@
+html {
+  /*
+    NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
+    When scrolling to a heading, the heading should
+    go below the sticky marketing header. The value
+    of the padding depends on the height of the header.
+  */
+  @media screen and (min-width: 1200px) {
+    scroll-padding-top: 92px;
+  }
+  @media screen and (min-width: 769px) and (max-width: 1199px) {
+    scroll-padding-top: 151px;
+  }
+}
+
 #guide {
   * {
     font-family: Inter, sans-serif;
@@ -58,24 +73,40 @@
     @media screen and (min-width: 1200px) {
       position: -webkit-sticky;
       position: sticky;
+      /*
+        NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
+        This is dependent on the height of the header.
+      */
       top: 72px;
     }
     @media screen and (min-width: 769px) and (max-width: 1199px) {
       position: -webkit-sticky;
       position: sticky;
+      /*
+        NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
+        This is dependent on the height of the header.
+      */
       top: 131px;
     }
   }
 
   .h-almost-full-md {
     @media screen and (min-width: 769px) {
-      height: 95vh;
+      /*
+        NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
+        This is dependent on the height of the header.
+      */
+      height: 90vh;
     }
   }
 
   .h-almost-full-lg {
     @media screen and (min-width: 993px) {
-      height: 95vh;
+      /*
+        NOTE: DEPENDENT ON MARKETING HEADER/FOOTER
+        This is dependent on the height of the header.
+      */
+      height: 90vh;
     }
   }