Creating a clean unified border around an li and its ul with CSS <p>Within my <code>#header</code> <code>#nav</code>, I have a <code>&lt;ul&gt;</code> within an <code>&lt;li&gt;</code> that displays on <code>li:hover</code>. I want to put a border around everything but for some reason adding a border around the main <code>&lt;li&gt;</code> makes the <code>&lt;ul&gt;</code> within it fall out of alignment by one px on the left. </p> <p>Here's a jsFiddle to show what I'm doing:</p> <p><a href="http://jsfiddle.net/Mh3Hg/" rel="nofollow">http://jsfiddle.net/Mh3Hg/</a></p> <p>Here is my HTML:</p> <pre><code>&lt;div id="header"&gt; &lt;div id="nav"&gt; &lt;ul&gt; &lt;li id="thisli"&gt;&lt;a href="#"&gt;Main Element&lt;/a&gt; &lt;ul id="children"&gt; &lt;li&gt;&lt;a href="#"&gt;First Child&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Second Child&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- end nav --&gt; &lt;/div&gt; </code></pre> <p>The border that throws it off is the <code>border-left:1px solid #99B3FF</code> applied to <code>li#thisli</code>. Can anyone help me figure out what's wrong?</p>