Can anyone tell me why my links won't line up

Hi there,My vaigation links don't seem to line up. Heres the code.

<div id="NavigationLinks">
<ul id="NavigationLinks">
<li><a href="test1.HTML" class="active" >HOME</a></li>
<li><a href="Facts.HTML" class="active" >KNOW YOUR FACTS</a></li>
<li><a href="Activity.html" class="active" >ACTIVITIES</a></li>
<li><a href="Contact.HTML" class="active" >FORUM</a></li>
<li><a href="UsefulLinks.html" class="active" >USEFUL LINKS</a></li>
</ul>
</div><!-- end of NavigationLinks -->

-----------------------------------------------------------------------------

<style type="text/css">
html,body{
margin:0;
padding:0;
background-color:#000;
}

body{
color:#FFF;
font: 76% arial,sans-serif;
text-align:center;
background: #565656 url(Background2.jpg) center fixed;
background-repeat: no-repeat;
}
p{
margin:0 10px 10px
}
a{
display:block;
color: #981793;
padding:10px
}

div#header h1{
height:80px;
line-height:80px;
margin:0;
padding-left:10px;
background: #EEE;
color: #79B30B
}

div#container{
width:900px;
margin:0 auto;
text-align:left

}

div#content p{
line-height:1.4
}

div#footer p{
margin:0;
padding:5px 10px
}



div#left{
background:#B9CAFF;
float:left;
width:150px
}

div#right{
background:#FF8539;
float:right;
width:750px
}

div#footer{
background: #333;
color: #FFF;
clear:both;
width:100%
}

#NavigationLinks {
margin: 0;
padding: 0 0 20px 10px;
}

#NavigationLinks li {
margin: 0;
padding: 0;
display: inline;
list-style: none;
}

NavigationLinks a {
float: left;
line-height: 14px;
font-weight:bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #ffffff;
}

#NavigationLinks a.active, #NavigationLinks a:hover {
border-bottom: 4px solid #000000;
padding-bottom: 2px;
color: grey;

}

#NavigationLinks a:hover {
color:#333333;
}


</style>

Any help please would be much apreciated

NavigationLinks a {
float: left;
line-height: 14px;
font-weight:bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #ffffff;
} should be
#NavigationLinks a {
float: left;
line-height: 14px;
font-weight:bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #ffffff;
}

Hello GBizzle99,
You want them lined up to the left or horizontal?

Either way, there are some errors there that the validator can help you find. have a look at the links about validating in my sig below.

Here is an example of a horizontal menu that you might be able to copy - http://nopeople.com/CSS/anotherNavBar/index.html

Ahh cheers guys, there working now. Soo next question......

I want the links to appear on top of an image underneath. So i tried putting background image on in the css but it only shows underneath each link, and I want to go all the way across, like a Nav Bar. How do I go about this, I've heard about absolute postioning, but will this still follow my template if I start messing around with this ?

I want the links to appear on top of an image underneath. So i tried putting background image on in the css but it only shows underneath each link, and I want to go all the way across, like a Nav Bar.
<div id="NavigationLinks">
<ul id="NavigationLinks"> First of all your markup is invalid. You can't have multiple elements with same id attribute value in a document. Just remove that <div>, or remove that id from <div>, and then apply the background on your <ul>

Have a look at http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support, to see how to make a horizontally centered menu. There, you may apply the background on the container div, having id="centeredmenu"