CSS, центрирующие элементы на борту

Question

Простой вопрос, что случилось? У меня есть меню и логотип, и я не могу сосредоточиться на этом. Я не знаю почему.

Мой код 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; 
 
    }

<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>

и что у меня есть:

Я использую Див с в нав, потому что мне нравится сделайте это так. Я хочу, чтобы логотип и меню были центрированы. Я знаю шириной, и я не понимаю, почему margin: 0 auto; не работает.

Edit:

Я хочу достичь такой вещи:

Answer 1

Простой ошибки. Вам нужен идентификатор не тега http://joxi.ru/eAOYEqBuxvRD9m

Answer 2

Лучшим способом для этой ситуации является flexbox.

#header{ 
 
    display:flex; 
 
    justify-content:center; 
 
    width: 100%; 
 
    flex-wrap:wrap; 
 
    -webkit-flex-wrap:wrap; 
 
} 
 
#header #logo 
 
{ 
 
    width:100px; 
 
} 
 
nav{ 
 
    display:flex; 
 
    justify-content:center; 
 
    width: 100%; 
 
} 
 
nav div { 
 
\t margin: 10px; 
 
}

<div id="header"> 
 
     <a href="#"><img id="logo" src="https://www.gravatar.com/avatar/087039a00851e75ff483470e3aba89c9?s=48&d=identicon&r=PG" 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> 
 
     
 
     </nav> 
 
     <div style="clear:both;"></div> 
 
</div>