Homework - Stubborn Navigation

I've recently been altering an existing website to become responsive/fluid/flexible.

One of the biggest issues I was having was how to get the nav more responsive.

I came across a good example at http://www.hongkiat.com/blog/responsive-web-nav/ and set about making it more in keeping with my website.

I'm actually stumped on something which is more than likely going to take you guys seconds to solve - making my links centre inside the nav div.

Make sure your browser is more than 767px (preferably > 800px) or you won't see the issue.

HTML
CSS

Thank you in advance!

in your descurt.css file, line 204 nav li rule:
get rid of display:inline;
and add float:left; and padding: 0 22px;

this should bring each of the list items out to a nice equi-distant arrangement .

Thanks for the suggestion. I'm away from the computer at the moment but get the impression this wont allow the links to be flexible between browser widths 768-980px. Am I wrong? I'm looking for the padding between the links to increase/decrease as the browser window size changes.

I've achieved the centralling on my original concept at www.designercurtains.biz

yea, that padding won't work for a variable width.
I'm not sure how to go about that.

rdbrotherton, are you aware that you're mixing XHTML 1.0 and HTML5? You should pick one (I recommend HTML5) and then fix the errors with the help of http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ (under "more options", make sure it's set it to use "CSS level 3").

I'll suggest a solution but I should mention that it doesn't work in older versions of IE, e.g. IE7. It is simply to give the list-items "display:table-cell" and the <ul> "display:table".

I had wondered as the <nav> tag was being used, but hoped it was just me not realising it was available before HTML5.

Thanks for the help.

Kravvitz - thanks for your help with that. I've re-written the page in HTML5 and started again with the navigation. I've gotten it to work well enough for my liking, however I seem to have found a strange bug.

Viewing on my iPhone, the menu appears how it should. I click the menu and it drops to reveal the links. The bug appears when I rotate my iPhone (to landscape), the links font appears to increase in size....

Solutions greatly appreciated, as always!

Try setting the "-webkit-text-size-adjust" property on that sub-menu. I would suggest you do so within an @media rule that targets smart-phone screen sizes.

Awesome little tip there Kravvitz. Thanks for all your help on this subject

Will I ever retain any of this knowledge!?!?