CSS，在导航中居中元素

Question

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:

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

and what I've got:

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:

Answer 1

Simple error. You need id not tag http://joxi.ru/eAOYEqBuxvRD9m

Answer 2

The best way for this situations is 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 { 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>