100% Wide Navigation

I have always had a problem with setting full width navigation using unordered lists and have ended up using very complicated hacks to get it to work. When each of the list elements is set to display:inline-block; there is always a margin added on the right hand side that causes the navigation to never fit in the navigation are just right, either leaving space or overrunning the navigation area.

I have only recently found out how to fix this problem, and it is deceptively easy. When creating an unordered list, I always put each list item on a seperate line to avoid confusion and allow me to move/modify the items easily. It turns out that by putting the list elements on each line it causes this extra right margin to be added. A quick fix for this is to simply put all the navigation elements in the list side by side on the same line.

If, however, there is alot of information on the one line and you would really prefer to have the code on seperate lines, the same thing as above can be achieved by ‘commenting out’ the line break as can be seen below.

I can now set a percentage value width for each of the list tags and it will fit the width perfectly.