Fix the issues for The h2 overlaps with header below

Author: rakeshAlgo

src/css/doc.css

@@ -46,7 +46,6 @@
 .doc h2 {
   font-size: var(--heading-h2);
   max-width: fit-content;
-  display: inline-block;
   width: 100%;
   /* NOTE used to restrict width of key line */
 }

src/css/main.css

@@ -6,8 +6,8 @@ main {
 main [id]::before {
   content: "";
   display: inherit;
-  height: var(--height-to-body);
-  margin-top: calc(-1 * var(--height-to-body));
+  height: var(--h2-heading-top-space);
+  margin-top: calc(-1 * var(--h2-heading-top-space));
   visibility: hidden;
   width: 0;
 }

src/css/vars.css

@@ -73,6 +73,7 @@
   --height-nav: calc(var(--height-min-body) + var(--height-spacer));
   --height-nav-with-version: calc(100vh - var(--height-to-body) - var(--height-version-control));
   --nav-menu-top-space: calc(var(--height-to-body) + var(--height-version-control));
+  --h2-heading-top-space: calc(var(--height-to-body) + 0.5rem);
   /* --width-main-gutter: 1.5rem; */
   --width-main-gutter: 2.5rem;
   --width-container: 90rem;