I would like to have a navigation bar which is centralised to the screen without gaps between the button. I realised the gaps can be closed by having a 'float:left'. however, this would result in the navigation bar being flushed to the left. without 'float:left', there will be gaps yet centralised. would appreciate if someone could help me out. thank you!

I recommend you didn't use hard tabs in your code, instead use soft tabs (N spaces instead of 1 tab). It will be more readable across multiple platforms (most platforms support mono-spaced fonts, while not all platforms support visible tabs)
–
Madara UchihaJul 3 '12 at 15:00

Your answer is not very useful. Say jsfiddle goes down tomorrow, your answer is practically useless. Please spend some time placing the code in the answer body, explaining on it a bit, then provide a link to the live example :)
–
Madara UchihaJul 3 '12 at 15:01

@SVS Thank you for the answer. may I know what does the line 'display: inline-block;" does? Also, why must this line be included in #nav ul instead of #nav or #nav li? thank you so much!
–
mrghost1988Jul 4 '12 at 16:48

Actually i changed the code little bit just check the updated answer. There is no use of margin:0 auto. As u have already applied text-align :center to #nav, which is making ul center aligned & display:inline-block is added because ul will take only the width according to with of all li's
–
SVSJul 4 '12 at 17:08