Simple question, what's wrong? I've got menu and logo and I can't center this. I don't know why.

My CSS code:

```css
#header {
  width: 100%;
  background-color: #515963;
}

#header #logo {
  width: 200px;
  margin-left: 80px;
  padding: 20px;
  float: left;
}

#header nav {
  float: right;
  margin-right: 80px;
  line-height: 104px;
}

#header nav .menuItem {
  float: right;
  color: #fff;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 0.8px;
  font-weight: 500;
  padding: 10px 30px 10px 10px;
}

#header nav .menuItem .item {
  cursor: pointer;

#header #logo {
    display: block;
    width: 200px;
    margin: 0 auto;
    clear: both;
  }
  #header nav {
    clear: both;
    width: 369px;
    margin: 0 auto;
    line-height: 104px;
  }
  #header nav .menuItem {
    padding: 0;
  }
```

```html
<div id="header">
      <a href="#"><img id="logo" src="img/logo.png" alt="AFP"/></a>
      <nav>
        <div class="menuItem item1"><span class="item">kontakt</span></div>
        <div class="menuItem item2"><span class="item">produkty</span></div>
        <div class="menuItem item3"><span class="item">o nas</span></div>
        <div style="clear:both;"></div>
      </nav>
      <div style="clear:both;"></div>
 </div>
```

and what I've got:

[![enter image description here](https://i.stack.imgur.com/PMNN4.jpg)](https://i.stack.imgur.com/PMNN4.jpg)

I'm using **div**s in nav because I like do it this way. I want the logo and the menu to be centered. I know the **width** and I don't understand why `margin: 0 auto;` doesn't work.

Edit: 

I want to reach such thing:

[![enter image description here](https://i.stack.imgur.com/bbUCI.jpg)](https://i.stack.imgur.com/bbUCI.jpg)