lucy24 - 2:49 am on Dec 13, 2011 (gmt 0)

How much of the code did you look at?

:: detour to add some desperately needed spaces and line breaks ::

Ignore all the jquery and conditional yakkety-yak. The text is a red herring: Every one of those items has an explicitly declared width to go with the embedded font. (Baaaaad Arkansas! :)) Incidentally, it's a list.

The answer is here:

#mainNav {position: absolute; top: 217px; left: 50%; z-index: 1000; width: 976px; margin: 0 0 0 -488px}

That's all.

50% = guess what relationship to -488px and 976px.

Try it and see. Put in a visible border and fill with some meaningless text and watch it happen before your very eyes. You can do it with ems too. The image is background and therefore has no effect on the page scrolling.