I am having trouble positioning this element properly in my code. Can someone help me spot the error?

So I'm playing around with the tutorial from CSS Mastery book so that I can practice and 开发者_运维问答hone my CSS skills and one of the examples is a site called Climb the Mountains

Here is my version: http://shaan.debug.io/test/csstest

So I noticed the ul id="navigation_pri" (begins with the Home link which has a grey background) was not aligning properly based on following the code from the Climb the Mountains example.

It should be positioned in reference to the closest positioned parent, which is div id="branding". So I ran a test to check this and set left:0 to see if it aligns left with that div. But it does not. There appears to be around 50px to the left of space still. I went through my code and can't seem to figure out why this is happening. Can someone enlighten me as to why its not being properly positioned relative to the div id="branding"?

Since you are using a ul tag for your navigation it is automatically indenting and therefore creating that extra space. If you want to remove that space you can add the following css properties to that particular ul:

list-style-type: none; padding-left: 0;

That will remove the extra spacing and keep it aligned.