Cool, moved to the next step. I equally created an inner-nav to fit the first row of navigation items.
I commented my CSS file http://pixella.com.au/togrev/css/tog.css as why things are setup this way.
Basically I created that inner-nav, then floated the menu items to the left within it to make sure they are central to the page but bordering proper left on the nav.
I also found that I need to clear the float otherwise it kept trying to squeeze against the other floating elements on top.
One point of confusion though as I now have both an inner-header and inner-nav.
I understand that floats are removed from document flow, when I don't clear the inner-nav ul selector and only float it it attaches itself to the rhs of the inner-header element.
I understand that multiple left floated elements would behave like this and all go on the same horizontal line if space allows them to fit.
But the #nav ul is floating within #inner-nav, both innner-header and inner-nav have a width of 1004px so how can the nav ul still get moved to the right of the inner-header if I make my browser wide enough? I would not expect this to be possible given the width of each element?
I hope I am making sense here.