Update docs demo margin

1 files changed, 9 insertions, 9 deletions

diff --git a/docs/layout.html b/docs/layout.html
index 65d8008..3c27fec 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -132,7 +132,7 @@
           <div class="container" id="grid">
             <h3 class="s-title"><a class="anchor" href="#grid" aria-hidden="true">#</a>Flexbox grid</h3>
             <p>Layout includes flexbox based responsive grid system with 12 columns.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column">
                 <div class="bg-primary text-secondary docs-block"></div>
               </div>
@@ -205,7 +205,7 @@
               You can specific the width of each column by adding class <code>col-<1-12></code>.
             </p>
             <p>And you can add the <code>col-gapless</code> class to the <code>columns</code> to have gapless columns.</p>
-            <div class="columns col-gapless">
+            <div class="docs-demo columns col-gapless">
               <div class="column col-6">
                 <div class="bg-gray docs-block">col-6 (gapless)</div>
               </div>
@@ -220,7 +220,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
             <p>By default, Spectre grid has multi-line flexbox enabled. You can add the <code>col-oneline</code> class to <code>columns</code> to make all its child columns positioned in the same single row.</p>
-            <div class="columns col-oneline">
+            <div class="docs-demo columns col-oneline">
               <div class="column col-8">
                 <div class="bg-gray docs-block">col-8</div>
               </div>
@@ -294,7 +294,7 @@
 </code></pre>
             <h4 class="s-subtitle" id="grid-nesting"><a class="anchor" href="#grid-nesting" aria-hidden="true">#</a>Grid nesting</h4>
             <p>To nest grids, add the new <code>columns</code> and <code>column</code> structure within an existing column.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6">
                 <div class="bg-gray">
                   <div class="docs-block">col-6</div>
@@ -328,7 +328,7 @@
           <div class="container" id="responsive">
             <h3 class="s-title"><a class="anchor" href="#responsive" aria-hidden="true">#</a>Responsive</h3>
             <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-10 col-lg-8 col-md-6 col-sm-4">
                 <div class="bg-gray docs-block">col-10 <br> col-lg-8 <br> col-md-6 <br> col-sm-4</div>
               </div>
@@ -367,7 +367,7 @@
 </code></pre>
             <h4 class="s-subtitle" id="responsive-visibility"><a class="anchor" href="#responsive-visibility" aria-hidden="true">#</a>Responsive visibility</h4>
             <p>The responsive visibility utilities help show and hide elements on specific viewport sizes.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <table class="docs-table table table-striped text-center">
                   <thead>
@@ -483,7 +483,7 @@
               <li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>.</li>
               <li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>.</li>
             </ul>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <table class="docs-table table table-striped text-center">
                   <thead>
@@ -608,7 +608,7 @@
           <div class="container" id="navbar">
             <h3 class="s-title"><a class="anchor" href="#navbar" aria-hidden="true">#</a>Navbar</h3>
             <p>Navbar is a layout container that appears in the header of apps and websites.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column">
                 <div class="navbar">
                   <div class="navbar-section"><a class="navbar-brand mr-2" href="#navbar">Spectre.css</a><a class="btn btn-link" href="#navbar">Docs</a><a class="btn btn-link" href="https://github.com/picturepan2/spectre">GitHub</a></div>
@@ -640,7 +640,7 @@
 <span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span>
 </code></pre>
             <p>You can use <code>navbar-center</code> class to have a centered section.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <div class="navbar">
                   <div class="navbar-section"><a class="btn btn-link" href="#navbar">Docs</a><a class="btn btn-link" href="#navbar">Examples</a></div>