Update docs demo margin

1 files changed, 10 insertions, 10 deletions

diff --git a/docs/utilities.html b/docs/utilities.html
index 5032ec7..b17bec3 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -133,7 +133,7 @@
             <h3 class="s-title"><a class="anchor" href="#colors" aria-hidden="true">#</a>Color utilities</h3>
             <p>Color utilities are used for changing colors for text, link and background.</p>
             <h4 class="s-subtitle" id="colors-text"><a class="anchor" href="#colors-text" aria-hidden="true">#</a>Text colors</h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <p><span class="text-primary">primary color</span></p>
                 <p><span class="text-secondary">secondary color</span></p>
@@ -152,7 +152,7 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span>&gt;</span>warning color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-error"</span>&gt;</span>error color<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
 </code></pre>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <p><a class="text-primary p-1" href="#colors">primary link</a></p>
                 <p><a class="text-secondary p-1" href="#colors">secondary link</a></p>
@@ -172,7 +172,7 @@
 <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-error"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>error color<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
 </code></pre>
             <h4 class="s-subtitle" id="colors-background"><a class="anchor" href="#colors-background" aria-hidden="true">#</a>Background colors</h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <p><span class="bg-primary p-1 rounded">primary bg</span></p>
                 <p><span class="bg-secondary text-primary p-1 rounded">secondary bg</span></p>
@@ -194,7 +194,7 @@
           <div class="container" id="cursor">
             <h3 class="s-title"><a class="anchor" href="#cursor" aria-hidden="true">#</a>Cursor utilities</h3>
             <p>Cursor utilities specify which mouse cursor to display when mouseover.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-4">
                 <div class="bg-gray docs-block c-hand">c-hand</div>
               </div>
@@ -255,17 +255,17 @@
           <div class="container" id="divider">
             <h3 class="s-title"><a class="anchor" href="#divider" aria-hidden="true">#</a>Divider</h3>
             <p>A Divider is used for separating elements.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column">
                 <div class="divider"></div>
               </div>
             </div>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
                 <div class="divider text-center" data-content="OR"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
               </div>
             </div>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column">
                 <form>
                   <div class="form-group">
@@ -322,13 +322,13 @@
               Loading indicator is used for loading or updating.
               You can add the <code>loading</code> class to a container for loading status.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12 text-center">
                 <div class="loading"></div>
               </div>
             </div>
             <p>Add the <code>loading-lg</code> class for large size.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12 text-center">
                 <div class="loading loading-lg"></div>
               </div>
@@ -378,7 +378,7 @@
           <div class="container" id="shapes">
             <h3 class="s-title"><a class="anchor" href="#shapes" aria-hidden="true">#</a>Shape utilities</h3>
             <p>Shape utilities are used for change element shapes.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 text-center">
                 <div class="bg-primary text-light docs-shape rounded centered">rounded</div>
               </div>