html - UL doesn't center in div -

html - UL doesn't center in div -

i want center uls in header maintain positioning themselves. thought of using overflow solution posted in question without overflow. http://codepen.io/anon/pen/jyubq

here's css:

#header ul { display: inline-block;} #header { z-index: 1; position:fixed; background-color: #668284; width: 99.5%; height: 60px; margin-top: -10px; margin-bottom: 5px;} #header ul li { width:48px; height:48px; margin-left:15px; margin-top: 5px; display:inline-block; background-color:#000000; padding:0; text-align: center;} #google{ width:48px; height:48px; background-image:url('images/googleplus.png'); display:block;} #facebook{ width:48px; height:48px; background-image:url('images/facebook.png'); display:block;} #twitter{ width:48px; height:48px; background-image:url('images/twitter.png'); display:block;} #header ul li#google{ background-color:#d34836; transition:background-color; transition-duration:0.17s;} #header ul li#google:hover{ background-color:#c23725;} #header ul li#facebook{ background-color:#3b5998; transition:background-color; transition-duration:0.17s;} #header ul li#facebook:hover{ background-color:#2a4887;} #header ul li#twitter{ background-color:#4099ff; transition:background-color; transition-duration:0.17s;} #header ul li#twitter:hover{ background-color:#3188ee;} #name { float: left; font-size: 20px; padding-top: 5px; margin-left: 5px;} #email { float: right; margin-right: 5px; padding-top: 5px; font-size: 16px; font-family: verdana, sans-serif; color: #ffffff;}

and here html part:

<div id="header"> <p id="name">your name here</p> <a href="mailto:you@yourdomain.com"><p id="email">you@yourdomain.com</p></a> <ul> <li id="facebook"><a id="facebook" href="#"></a></li> <li id="google"><a id="google" href="#"></a></li> <li id="twitter"><a id="twitter" href="#"></a></li> </ul> </div>

this code fix

#header ul { margin:0 auto; text-align:center; }

codepen link

http://codepen.io/anon/pen/ivjfd

html css centering