 <p>That's because you incorrectly calculating percentage for columns <code>margin</code> and <code>width</code>.</p> <p>Since you use <a href="http://www.w3schools.com/cssref/css3_pr_box-sizing.asp" rel="nofollow"><code>box-sizing: border-box;</code></a> on <code>section#hp-cols</code>, the inner width for the section with <code>10px</code> padding in both side is <strong><code>1120px</code></strong>, <em>not</em> <strong><code>1140px</code></strong>. If you use <code>width: 31.57894%;</code> (<code>360px</code> divided by <code>1140px</code>) for your column, it would give you columns with <strong><code>353px</code> wide</strong> <em>instead of</em> <strong><code>360px</code></strong> (since <code>31.57894%</code> of <code>1120px</code> is <code>353px</code>).</p> <p>The solution is to recalculate all percentage value, and use 1120 as divider. It should be like this.</p> <pre><code>section#hp-cols { padding: 0 .89285714%; /* 10px / 1120px */ } section#hp-cols ul li { width: 32.1428571%; /* 360px / 1120px */ } section#hp-cols ul li:nth-child(2) { margin: 0 1.78571429%; /* 20px / 1120px */ } </code></pre> <p>Here is the <a href="http://jsfiddle.net/cuplizian/7Aq74/" rel="nofollow"><strong>fiddle</strong></a> and <a href="http://fiddle.jshell.net/cuplizian/7Aq74/show/light/" rel="nofollow"><strong>full demo</strong></a> of fluid width page. I also made <a href="http://jsfiddle.net/cuplizian/J8EJ6/" rel="nofollow">fiddle</a> and <a href="http://fiddle.jshell.net/cuplizian/J8EJ6/show/light/" rel="nofollow">demo</a> of fixed width page for comparison.</p> <p>Hope it helps :)</p>