Question: I am trying to have a horizontal menu, but the ul is aligned to the right instead of in the middle.

Here are my CSS and HTML:

CSS:

```
#menu
{
    clear: both;
    float: left;
    width: 830px;
    display: inline;
    position: relative;
    z-index: 1;
    border-top: 1px solid #e9e6d9;
    border-bottom: 1px solid #e9e6d9; 
    margin: 0 auto;
    background-color:#FFFFFF;
    padding: 0;
}
#menu ul {
    margin: 0;
    display: block;
    text-align: center;
    padding: 0;
    float: right;
}
#menu li {
    /*font-family: Georgia, "Times New Roman", Times, serif;*/
    font-family: sans-serif, Helvetica, Arial;
    font-size: 13px;
    font-weight: normal;
    float: left;
    position: relative;
    list-style: none;
    margin: 0;
    display: inline-block;
    padding: 0;
}

```

HTML:

```
<div id="menu">
    <ul>
        <li>
            <a href="http://www.tahara.es/">
                <span>HOME</span>
            </a>
        </li>
        <li>
            <a href="http://www.tahara.es/shop/">
                <span>SHOP</span>
            </a>
        </li>
    </ul>   
</div>

```

Thanks in advance for any suggestion!

Answer: 
You can remove your float properties.
Just add a width to your #menu ul and add margin : 0 auto; to make it centered.

Example :

```
#menu ul {
    width: 300px;
    margin: 0 auto;
}

```

Live demo here : <http://codepen.io/joe/pen/uAaHo>
I fixed your problem.
The html code is alright and i changed the css code:

```
#menu
{
clear: both;
width: 830px;
display: inline;
position: relative;
z-index: 1;
border-top: 1px solid #e9e6d9;
border-bottom: 1px solid #e9e6d9; 
margin: 0 auto;
background-color:#FFFFFF;
padding: 0;
}
#menu ul {
margin: 0;
display: block;
text-align: center;
padding: 0;
}
#menu li {
    /*font-family: Georgia, "Times New Roman", Times, serif;*/
    font-family: sans-serif, Helvetica, Arial;
    font-size: 13px;
    font-weight: normal;
    position: relative;
    list-style: none;
    margin: 0;
    display: inline-block;
    padding: 0;​

```

I basically deleted any occurrency of `float:right;`. Fixing your problem is as simple as this.

Here's a [DEMO](http://jsfiddle.net/NrFae/).

If you need further assistance i can help you.

I also suggest you a few link that you can find useful for building css menus:

<http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/>

<http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/>

<http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/>

<http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/>