The bar appears like:
The HTML is :
The style sheet is:
The only change in the HTML from the absolutely basic version is that the div has been given a class. That means the CSS can style that div, and also the links in it, without changing links elsewhere on the page.
The initial * in the style sheet sets the margin and padding on everything to a default value of 0. Most browsers will impose some values for these, and we don't know what they are, so the simplest apporach is to make everything 0, and set what values we want.
Getting the bar centered is done by the left:20% trick. You can use margin:auto; but then you have to specify the width.
All measurements are done in em units - the basic size of a character. That way (rather than using pixels) means everything scales if the user changes the text size in the browser. The div sets a padding-top, which pushes the links down a bit. The link border color is not very pretty, but it means you can see where the edges of the links are.
Note there are gaps between the links. This is because in the HTML, there are newlines between the link elements. In a real page I'd get rid of those, but here it would be a bit unreadable.
Syntax highlighting by Alex Gorbatchev