diff --git a/examples/heroweb_example_base/css/heroweb.css b/examples/heroweb_example_base/css/heroweb.css
index d3701f7..63f7a0b 100644
--- a/examples/heroweb_example_base/css/heroweb.css
+++ b/examples/heroweb_example_base/css/heroweb.css
@@ -68,7 +68,7 @@ navbar-right {
     display: flex;
     align-items: center;
     margin-left: auto; /* Push to the right */
-    margin-right: 0; /* Ensure no right margin */
+    margin-right: 2px; /* Ensure no right margin */
 }
 
 navbar-right a {
@@ -118,14 +118,7 @@ mynav {
     overflow-y: auto;
     color: var(--nav-text);
     padding-top: 1.3rem;
-}
-
-docnav {
-    flex: 1;
-    min-width: 200px;
-    max-width: 250px;
-    overflow-y: auto;
-    color: var(--nav-text);
+    font-size: 0.8rem;
 }
 
 mynav ul {
@@ -162,7 +155,7 @@ mynav ul li.open > ul {
 }
 
 article {
-    flex: 4;
+    flex: 6;
     min-width: 200px;
     max-width: 1200px;
     overflow-y: auto;
@@ -172,18 +165,53 @@ article {
     background-color: var(--background-color-article);
 }
 
-article textarea {
-    line-height: 1.2;
+article p,
+article li,
+article blockquote,
+article table {
+    font-size: 0.8rem;
+    line-height: 1.2; /* Reduce line height to decrease space between lines */
+    margin-bottom: 0.6rem; /* Reduce margin to decrease space between paragraphs */
 }
 
-article md {
-    line-height: 1.2;
+article table {
+    line-height: 0.9;
+}
+
+article ul li {
+    line-height: 1;
+    margin-bottom: 0.1rem; /* Reduce margin to decrease space between list items */
+}
+
+article h1 h2 h3 h4 h5 {
+    margin-top: 0rem;
+}
+
+article h1 {
+    font-size: 1.6rem;
+    margin-bottom: 0.5rem; /* Reduce space after header */
+}
+
+article h2 {
+    font-size: 1.2rem;
+    margin-bottom: 0.4rem; /* Reduce space after header */
+}
+article h3 {
+    font-size: 1rem;
+    margin-bottom: 0.3rem; /* Reduce space after header */
+}
+article h4 {
+    font-size: 0.8rem;
+    margin-bottom: 0.2rem; /* Reduce space after header */
 }
 
 docnav {
     flex: 1;
     min-width: 200px;
-    font-size: 0.9rem;
+    max-width: 250px;
+    overflow-y: auto;
+    color: var(--nav-text);
+    font-size: 0.6rem;
 }
 
 docnav ul {
@@ -215,7 +243,7 @@ docnav ul li {
     navbar-right {
         flex-direction: column;
         align-items: stretch; /* Changed from flex-start to stretch */
-        margin-left: 0;
+        margin-left: 2px;
         width: 100%; /* Ensure full width on mobile */
     }
     navbar-right a {