how to center css navigation bar

Question

i am trying to center my css navigation bar but cant figure out why is not working, where am i doing wrong. i want it in the top center of the page. i tried margin:0 auto but it wont work here is my code:

<style>
    ul {
        list-style-type: none;
        padding: 0;
        overflow:hidden;
    }
    a:link,a:visited {
        margin:0 auto;
        display:block;
        width: 120px;
        font-weight:bold;
        color:#FFFFFF;
        text-align:center;
        padding:4px;
        text-decoration:none;
        text-transform:uppercase;
    }
    a:hover, a:active {
        background-color:#7A991A;
    }
    li {
        float: left;
    }
    #menu {
        background-color:#98bf21;
    }
</style>
<div id="menu">
        <header>
        <ul>
            <li><a href="Home.aspx">Home</a></li>
            <li><a href="News.aspx">News</a></li>
            <li><a href="Articles.aspx">Articles</a></li>
            <li><a href="Forum.aspx">Forum</a></li>
            <li><a href="Contact.aspx">Contact</a></li>
            <li><a href="About.aspx">About</a></li>
        </ul>
    </header>
    </div>

Answer 1

      nav {
        width: 75%;
        margin: auto
      }

      #menu {background-color: #98bf21}

      .container{padding: 0.10em}

      .cell-row {display:table; width:100%}
      .cell {display: table-cell}
      .cell-middle {vertical-align: middle}

      a:link, a:visited {
        font-weight: bold;
        color: black;
        text-align: center;
        padding: 4px;
        text-decoration: none;
        text-transform: uppercase;
      }

      a:hover, a:active {background-color: #7A991A}

      @media (max-width: 500px) {
        .mobile {
          display: block; 
          width: 100%; 
          text-align: center
        }
							
        nav {
          width: 100%;
          margin: auto
        }  
      }

    <nav>
      <div id="menu" class="cell-row" style="text-align: center">
        <div class="container cell cell-middle mobile"><a href="Home.aspx">Home</a></div>
        <div class="container cell cell-middle mobile"><a href="News.aspx">News</a></div>
        <div class="container cell cell-middle mobile"><a href="Articles.aspx">Articles</a></div>
        <div class="container cell cell-middle mobile"><a href="Forum.aspx">Forum</a></div>
        <div class="container cell cell-middle mobile"><a href="Contact.aspx">Contact</a></div>
        <div class="container cell cell-middle mobile"><a href="About.aspx">About</a></div>
      </div>
    </nav>

Answer 2

Change your last two CSS rules to:

li {
    display:inline-block;
}
#menu {
    background-color:#98bf21;
    text-align:center;
}

jsFiddle example

Answer 3

Add the following css:

ul {
    margin: 0 auto;
    display: inline-block;
}

This will make the ul fit its contents and then be centered in its container.

Answer 4

Use the inline-block css magic :)

JSFiddle

Answer 5

li {
   display: inline-block;
}

#menu {
    background-color:#98bf21;
    margin: 0 auto;
    text-align: center;
    width: 80%;
}

Answer 6

I had the same problem until I read this post and decided to center the text in the "nav".

So basically your ul should be in a nav so you can text-align: center the nav area.