Evenly space links in div

I'm making a simple website for college, which I hate, due to the designing. I'm a php programmer not a designer. (May sound stupid)

I have run into a problem, I have a center开发者_高级运维ed div of 600px then inside <nav> tags I have 4 links. I would like them evenly spaced out, across the div. I have tried setting the margin-left and right but had no luck.

Take a look at it on jsfiddle

Thanks

Working demo: http://jsfiddle.net/8jK7N/1/

IE, however, doesn't support styling of the new HTML5 elements. You can use shiv to solve this issue. Working demo (with shiv): http://jsfiddle.net/8jK7N/2/

Take the <p> tag out of the <nav> bit, also margin-left 73px and margin-right 73px on each may make the links too wide for one line in your div. I know the math works out but it may be acting strangely.

If you remove the margin-right on the nav a it will work. The added spacing on the margin-right is added to the box of the anchor. Here is how the box model works: http://www.w3.org/TR/CSS2/box.html

Note in IE the html5 nav selector doesn't seem to not work correctly. I added a class on the paragraph tag and applied the fix that that tag.

This is what will work in all browsers: http://jsfiddle.net/RkUWU/2/

You can use the following:

nav a{
    width:150px; display:block;float:left;
}

If you want then centered, add:

text-align:center;