title: horizontally center two divs
body: <p>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?</p>
  
  <p>My HTML</p>
  
  <pre><code>    &lt;div id="center"&gt;
      &lt;div id="logo"&gt;&lt;img src="images/blackcat_logo.png" width="200px"&gt;&lt;/div&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;SHOP&lt;/li&gt;
              &lt;li&gt;ARTIST&lt;/li&gt;
              &lt;li&gt;SERVICES&lt;/li&gt;
              &lt;li&gt;FAQs&lt;/li&gt;
              &lt;li&gt;CONTACT&lt;/li&gt;
          &lt;/ul&gt;    
      &lt;/nav&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>