css - How to center the floating element?

Question

I am trying to center my menu which contains the ul menu.

The menu is float to the left and I can't seem to center the menu to the middle of the screen.

HTML

<section>
    <nav>
        <ul> 
            <li><a href='#'>item1</a></li>
            <li><a href='#'>item2</a></li>
            <li><a href='#'>item3</a></li>
            <li><a href='#'>item4</a></li>
            <li><a href='#'>item5</a></li>
        </ul>
    </nav>
</section>

CSS

nav ul{
    display: inline-block;
    background-color: red;
}
nav ul li{
    list-style: none;
    font:bold .6em arial;
    float: left;
    margin: .3em;
    padding: 1.3em;
    background-color: #A8A8A8;
}

//the and margin text align doesn't seem to work...
section {
   text-align:center;
   margin:0 auto;
}

Can anyone help me about it? Thanks a lot!

Answer 1

As pointed out by xec, the problem seems to be with the invalid comment syntax. The correct syntax for comments in CSS is /*Comment Here */. When the comment syntax is corrected, your code does center the menu.

/*the and margin text align doesn't seem to work...*/
section {
   text-align:center;
   margin:0 auto;
 }

Demo