css - What to do when you cannot position your image correctly in html? -

the css code below written me when trying create fixed header mashable.com,but hard try cannot seem make logo.png appear margin:auto 19px;.pleae me , tell me im doing wrong.i beginner html , css,so please gentle. , want logo , nav list in single line.

header{position:fixed;    background:#333;    height:128px;}  h1{    display:inline;        float:left;    background:url(images/logo.png) no-repeat;        width:289px;height:47px;        margin:        text-indent:-9999px;}  nav {              height:26px;          float:right;      margin-top:19px;      width:631px;}  nav ul li{           display:inline;}   

this html:

<header>     <h1>logo</h1>     <nav>         <ul>             <li>categories</li>             <li>search</li>             <li>about me</li>             <li>contact me</li>                              <li>social</li>         </ul>     </nav> </header> 

margin auto works on block elements, not inline ones. if want logo centred change 2 things in h1 css:

1. change display: block;
2. remove float: left;

obviously add margin value i'm assuming copy/paste typo.