This is the html part of my code and it may be the problem.

<div id="navblock">
            <ul id="mainNav">
                <li><a href="../../index.php" title="Tarantula Database Home">Home</a></li>
                <li><a href="../pages/search.php" title="Tarantula Database Search">Search</a></li>
                <li><a href="../pages/submit.php" title="Tarantula Database Submit">Submit</a></li>
                <li><a href="index.php" title="Tarantula Database Forum">Forum</a></li>
                <li><a href="../pages/contact.php" title="Tarantula Database Contact">Contact</a></li>
            </ul>
        </div>

With the css code it was floating to the left and looked fine but it wan't centered. it look like like this

http://www.tarantuladatabase.com/this1.JPG

So I changed my css code to this

  }

 ul#mainNav li{
    border-top: 1px solid #766454;
    border-bottom: 1px solid #766454;
    margin-right: auto;
    margin-left: auto;
  }

And that didnt work either

http://www.tarantuladatabase.com/assets/forum

Any idea how I can center it?

May want to have this moved to the CSS forum, since it's a CSS question.

Really? Could you explain that please?

I was thinking the the li tags needed to be changed to in line but how can I do it in css?

I usually do something like this (I think this is what you're looking for):

ul#mainNav {
    display: block;
    text-align: center;
}

ul#mainNav li {
    display: inline;
}

And I would probably put the borders on the ul#mainNav, instead of on the child li, so that the borders stretch across the window. That said, the way I have set it up, you can probably just remove the <div id="navblock">, and put whatever styling you need for it on the ul#mainNav, since its display is now block, and it pretty much acts like a div.

When you float an element, you MUST give that element a width. The margin: 0 auto; can't work because there's no width defined.