made columns more even

Author: jtauber

articles/css-hexagon.html

@@ -161,7 +161,7 @@ <h1>CSS Hexagon Tutorial <span>by James Tauber</span></h1>
 <p>Here is a <code>100px</code> &times; <code>100px</code> <code>div</code> with a <code>30px</code> border:</p>
 
 <div style="float: left; width: 400px;"><div class="box-1"></div></div>
-<pre style="margin-left: 410px;">
+<pre style="margin-left: 480px;">
 height: 100px;
 width: 100px;
 border: 30px solid #999;
@@ -171,7 +171,7 @@ <h1>CSS Hexagon Tutorial <span>by James Tauber</span></h1>
 <p style="margin-top: 50px;">Watch what happens when each border has a different colour:</p>
 
 <div style="float: left; width: 400px;"><div class="box-2"></div></div>
-<pre style="margin-left: 410px;">
+<pre style="margin-left: 480px;">
 height: 100px;
 width: 100px;
 border-top: 30px solid #C66;
@@ -184,7 +184,7 @@ <h1>CSS Hexagon Tutorial <span>by James Tauber</span></h1>
 <p style="margin-top: 50px;">Now if we drop the setting of <code>height</code> and explicitly set the <code>width</code> of the <code>div</code> to be <code>0</code>, we get the following:</p>
 
 <div style="float: left; width: 400px;"><div class="box-3"></div></div>
-<pre style="margin-left: 410px;">
+<pre style="margin-left: 480px;">
 width: 0;
 border-top: 30px solid #C66;
 border-bottom: 30px solid #6C6;
@@ -196,7 +196,7 @@ <h1>CSS Hexagon Tutorial <span>by James Tauber</span></h1>
 <p>Drop the top border and make the left and right borders <code>transparent</code> and you get this:</p>
 
 <div style="float: left; width: 400px;"><div class="box-4"></div></div>
-<pre style="margin-left: 410px;">
+<pre style="margin-left: 480px;">
 width: 0;
 border-bottom: 30px solid #6C6;
 border-left: 30px solid transparent;
@@ -207,7 +207,7 @@ <h1>CSS Hexagon Tutorial <span>by James Tauber</span></h1>
 <p>The side borders don&rsquo;t have to be the same size as the bottom border. Here&rsquo;s <code>30px</code> bottom with <code>52px</code> sides:</p>
 
 <div style="float: left; width: 400px;"><div class="box-5"></div></div>
-<pre style="margin-left: 410px;">
+<pre style="margin-left: 480px;">
 width: 0;
 border-bottom: 30px solid #6C6;
 border-left: 52px solid transparent;
@@ -218,7 +218,7 @@ <h1>CSS Hexagon Tutorial <span>by James Tauber</span></h1>
 <p>And here&rsquo;s a <code>div</code> with a top border instead of a bottom border:</p>
 
 <div style="float: left; width: 400px;"><div class="box-6"></div></div>
-<pre style="margin-left: 410px;">
+<pre style="margin-left: 480px;">
 width: 0;
 border-top: 30px solid #6C6;
 border-left: 52px solid transparent;
@@ -233,7 +233,7 @@ <h1>CSS Hexagon Tutorial <span>by James Tauber</span></h1>
     <div class="box-7"></div>
     <div class="box-6"></div>
 </div>
-<pre style="margin-left: 410px;">
+<pre style="margin-left: 480px;">
 width: 0;
 border-bottom: 30px solid #6C6;
 border-left: 52px solid transparent;
@@ -260,7 +260,7 @@ <h1>CSS Hexagon Tutorial <span>by James Tauber</span></h1>
     <div class="box-9"></div>
     <div class="box-10"></div>
 </div>
-<pre style="margin-left: 410px;">
+<pre style="margin-left: 480px;">
 float: left;
 border-right: 30px solid #6C6;
 border-top: 52px solid transparent;
@@ -296,7 +296,7 @@ <h1>CSS Hexagon Tutorial <span>by James Tauber</span></h1>
         <div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
     </div>
 </div>
-<pre style="margin-left: 410px;">
+<pre style="margin-left: 480px;">
 .hex {
     float: left;
     margin-left: 3px;
@@ -347,7 +347,7 @@ <h1>CSS Hexagon Tutorial <span>by James Tauber</span></h1>
         <div class="hex2"><div class="left"></div><div class="middle"></div><div class="right"></div></div>
     </div>
 </div>
-<pre style="margin-left: 410px;">
+<pre style="margin-left: 480px;">
 .hex {
     float: left;
     margin-right: -26px;