I need help i have a image centered under some links in my header, but its done in a way thats not very clean or professional, can anyone tell me what im supposed to be doing?
Code:
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset=utf-8>
      <title>Untitled Document</title>
      <link href="css/header.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li class="current">
            <a hre="#section-1">About</a></li> <li><a href="#section-2">Work</a>
          </li>
          <li>
            <a href="#section-3">Contact</a>
          </li>
          <li>
            <a href="#" target="_blank">Blog</a>
          </li>
       </ul>
     </nav>
     <a href="/" id="logo"></a>
    </header>
  </body>
</html>
Code:
@charset "utf-8"; /* CSS Document */ 
*{ 
margin:0px; padding:0px; 
}

/*html5 display rule*/ 
address, article, aside, canvas, content, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary { 
display: block; 
} 

header{ 
background-color:#000; 
height:70px; 
position:fixed; 
width:100%; 
z-index:200; 
border-bottom-left-radius:25px;
border-bottom-right-radius:25px; 
-moz-border-bottom-left-radius:25px; /* Firefox 3.6 and earlier */ 
-moz-border-bottom-right-radius:25px; /* Firefox 3.6 and earlier */ 
}

#logo{ 
background-image: url(../images/logo_small.png); 
background-repeat:no-repeat; 
width:61px; 
height:62px; 
position:inherit; 
left: 50%; 
margin-left: -36px; /* css3 transition */
-webkit-transition:-webkit-transform 1s; 
-o-transition-property:-o-transform; -o-transition-duration:1s; 
-moz-transition-property:-o-transform; 
-moz-transition-duration:1s; 
transition-property:transform; 
transition-duration:1s; 
} 

#logo:hover{ 
transform:rotate(360deg); 
-moz-transform:rotate(360deg); 
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg); 
} 

nav{ 
width:100%; 
text-align:center; 
padding:20px 0 0 0; 
} 

nav li{ 
margin:0 20px 10px 20px; 
text-align:center; 
list-style:none; 
display:inline; 
} 

nav a { 
display:inline; 
color:#3A1F21; 
font-family:Arial, Helvetica, sans-serif; 
font-weight:bold; 
font-size:14px; 
padding:10px 10px; 
text-decoration:none; 
text-transform:uppercase; 
border-radius:20px; 
-moz-border-radius:20px; 
} 

nav a:hover{ 
background:#DEDEDE; 
border-radius:20px; 
-moz-border-radius:20px; 
} 

nav .current a {
background: #D7683F; 
display: inline; 
color: #ededed; 
border-radius:20px; 
-moz-border-radius:20px; 
} 

.current { 
background: #D7683F; 
border-radius:20px; 
-moz-border-radius:20px; 
}