title: How to center align logo image and right align navigation ul
body: <p>Both the logo and navigation are in a header div and I'd like to have the logo centered while the navigation is aligned to the right.</p>
  
  <p>I've tried doing display:block and margin: auto for the image which gets it centered, but then it pushes the navigation down to the next line.</p>
  
  <p>Current css is: </p>
  
  <pre><code>.logo {
      display: inline-block;
      width: 400px
      margin: 0 auto;
  }
  
  /* Navigation */
  
  #nav {
      display: inline-block;
      margin: auto; 
      padding:0; 
      list-style:none;
      float: right;
  }   
  </code></pre>
  
  <p>Read that I had to put width in to make margin:auto work but all it does is enlarges the image. Thanks.</p>