diff --git a/examples/use_scroll/src/main.rs b/examples/use_scroll/src/main.rs
index 60d4131..041782f 100644
--- a/examples/use_scroll/src/main.rs
+++ b/examples/use_scroll/src/main.rs
@@ -27,7 +27,7 @@ fn Demo(cx: Scope) -> impl IntoView {
 
     view! { cx,
         <div class="flex">
-            <div node_ref=el class="w-[300px] h-[300px] m-auto overflow-scroll bg-gray-500/5 rounded">
+            <div node_ref=el class="w-[300px] h-[300px] m-auto my-auto overflow-scroll bg-gray-500/5 rounded">
                 <div class="w-[500px] h-[400px] relative">
                     <div class="absolute left-0 top-0 bg-gray-500/5 px-2 py-1">
                         "top_left"
@@ -48,7 +48,7 @@ fn Demo(cx: Scope) -> impl IntoView {
                 </div>
             </div>
 
-            <div class="m-auto w-280px pl-4">
+            <div class="my-10 w-280px pl-4">
                 <div class="px-6 py-4 rounded grid grid-cols-[120px_auto] gap-4 bg-gray-500/5">
                     <span class="text-right opacity-75 py-4">
                         "X Position"
diff --git a/examples/use_scroll/style/output.css b/examples/use_scroll/style/output.css
index 888eb5c..26c08a2 100644
--- a/examples/use_scroll/style/output.css
+++ b/examples/use_scroll/style/output.css
@@ -300,6 +300,56 @@ select {
   margin: auto;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
+.m-10 {
+  margin: 2.5rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.mx-10 {
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+}
+
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.mr-0 {
+  margin-right: 0px;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ml-0 {
+  margin-left: 0px;
+}
+
 .flex {
   display: flex;
 }