html - Navbar Horizontal Menu positioning help. Very basic -

apologies basic-ness of question, creating dropdown menu , having problems margins , positioning.

ive set div of 85% want centered in page, , list items centered in middle of it's neat can't too.

<div class="menu-wrap"> <nav class="menu">     <ul class="clearfix">         <li><a href="#">home</a></li>          <li><a href="#">second page</a></li>         <li><a href="#">third page<span class="arrow">&#9660;</span></a>             <ul class="sub-menu">                 <li><a href="#">dropdown one</a></li>                 <li><a href="#">dropdown two</a></li>             </ul>         </li>         <li><a href="#">fourth page</a></li>         <li><a href="#">fifth page<span class="arrow">&#9660;</span></a>             <ul class="sub-menu">                 <li><a href="#">dropdown 1</a></li>                 <li><a href="#">dropdown item 2</a></li>                 <li><a href="#">dropdown 3</a></li>                 <li><a href="#">dropdown 4</a></li>             </ul>         </li>      </ul> </nav> 

css:

.clearfix:after { display:block; clear:both; }  .menu-wrap ul {     margin:0px;     padding:0px; }  .menu-wrap {     width:80%;     background: #85d2cd;     display: inline-block;     margin: auto; }  .menu {     width:100%;     margin:0px auto; }  .menu li {     margin:0px;     list-style:none; }  .menu {     transition:all linear 0.15s;     color:#fff; }     .menu > ul > li {     float:left;     display:inline-block;     position:relative;     font-size:19px; }  .menu > ul > li > {     padding:10px 30px;     display:inline-block;     text-shadow:0px 1px 0px rgba(0,0,0,0.4);     text-decoration:none; }  .menu > ul > li:hover > {      /* hover background color */     background:#5d9390; }  .menu li:hover .sub-menu {     opacity:1; }  .sub-menu {     width: 100%;     padding:5px 0px;     position:absolute; /* need menu height doesnt extend dropdown       size*/     top:100%;     left:0px;     z-index:-1;     opacity:0;     transition:opacity linear 0.15s;     background:#6d9e9b;  }  .sub-menu li {     display:block;     font-size:16px;  }  .sub-menu li {     padding:10px 30px;     display:block;     text-decoration:none; }  .sub-menu li a:hover {     background:#5d9390; } 

i think relevant code needed, i've kinda lost mind bit , put margin auto in many spots try fix none of working

first of change

.menu-wrap { width: 80%; background: #85d2cd; display: block; margin: 0 auto; overflow: hidden; } 

and center menu items, change ul style to

ul.sub-menu {  text-align: center; } 

that should things sorted out , aligned in middle.