 <p>It is because the whitespace between the <code>&lt;li&gt;</code> elements is significant. If you remove all whitespace, the elements will be right next to each other. Either you just do this:</p> <pre><code>&lt;li class="orange start"&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li class="orange center"&gt;&lt;a href=""&gt;Forum&lt;/a&gt;&lt;/li&gt; </code></pre> <p>Or, if you want to keep the line breaks in code, which I usually think is a good thing, you can insert an HTML comment like this:</p> <pre><code>&lt;li class="orange start"&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;!-- --&gt;&lt;li class="orange center"&gt;&lt;a href=""&gt;Forum&lt;/a&gt;&lt;/li&gt; </code></pre> <p>It's a matter of taste, but I tend to favor the latter because I find it more readable.</p>