horizontally center two divs

Question

I have two that I need horizontally centered to each other, wrapped in a single div. can you please explain what I am doing wrong?

My HTML

    <div id="center">
    <div id="logo"><img src="images/blackcat_logo.png" width="200px"></div>
    <nav>
        <ul>
            <li>SHOP</li>
            <li>ARTIST</li>
            <li>SERVICES</li>
            <li>FAQs</li>
            <li>CONTACT</li>
        </ul>    
    </nav>
    </div>

My CSS:

header{
   height:500px;
   width:auto;
   background-image:url(images/headerphoto.png);
   text-align:center;
}

#center{
   width:960px;
   margin:auto;
   overflow:hidden;
   display:inline-block;
}

#logo{
   float:left;
   display:inline-block;
}

nav{
   float:right;
   display:inline-block;
}

Answer 1

Remove the float from #logo and nav. Then set your #center div to text-align:center;

#center {
    width:960px;
    margin:auto;
    overflow:hidden;
    display:inline-block;
    text-align:center;
}

Is that what you had in mind?

Answer 2

#center {
  text-align:center;
}
#logo, nav {
  display: inline-block;
}

The above code works for me http://www.cssdesk.com/QKNNj .

Answer 3

Your full CSS should be:

#center {
    width:960px;
    margin:0 auto;
    overflow:hidden;
    left:0;
    right:0;
    text-align:center;
}