diff --git a/examples/heroweb_example_base/css/heroweb.css b/examples/heroweb_example_base/css/heroweb.css
index 0de0e2b..a8947d4 100644
--- a/examples/heroweb_example_base/css/heroweb.css
+++ b/examples/heroweb_example_base/css/heroweb.css
@@ -29,6 +29,7 @@ body > main {
 nav {
     background-color: var(--nav-background);
     padding: 0rem 1rem;
+    width: 100%; /* Ensure nav takes full width */
 }
 
 nav ul {
@@ -38,6 +39,7 @@ nav ul {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    width: 100%; /* Ensure ul takes full width */
 }
 
 nav ul li {
@@ -63,7 +65,8 @@ nav ul li a:hover {
 navbar-right {
     display: flex;
     align-items: center;
-    margin-left: 30%;
+    margin-left: auto; /* Push to the right */
+    margin-right: 0; /* Ensure no right margin */
 }
 
 navbar-right a {
@@ -193,24 +196,27 @@ docnav ul li {
     }
     nav ul {
         flex-direction: column;
-        align-items: flex-start;
+        align-items: stretch; /* Changed from flex-start to stretch */
     }
     nav ul li {
-        margin: 0 rem 0;
+        margin: 0.5rem 0; /* Added vertical margin */
     }
     navbar-right {
         flex-direction: column;
-        align-items: flex-start;
+        align-items: stretch; /* Changed from flex-start to stretch */
         margin-left: 0;
+        width: 100%; /* Ensure full width on mobile */
     }
     navbar-right a {
         margin-left: 0;
+        margin-top: 0.5rem; /* Add some vertical spacing */
     }
     navbar-right input[type="search"] {
         width: 100%;
-        margin: 0;
+        margin: 0.5rem 0; /* Add some vertical spacing */
     }
     .theme-icons {
         margin-top: 0.5rem;
+        justify-content: flex-end; /* Align icons to the right on mobile */
     }
-}
\ No newline at end of file
+}