I have been trying to adjust the links on the nav bar aligned right for little bit now and kinda need some help.
The links should be vertical align in the middle of the section but if you take a look the links are along the top instead. I've messed with the padding and margin but it didn't seem to make a difference. What can I do so the links are vertical aligned in the middle of the section?
header, footer, section, aside, nav, article { display: block; }
body { }
nav { width: 940px; height: 50px; margin: 0 auto; background-color: #520000; }
header { position: relative; width: 940px; height: 200px; margin: 0 auto; }
header h1, header h2 { margin: 0; line-height: normal; float: right; width: 650px; padding-right: 20px; }
header h1 a { text-decoration: none; }
header h2 { font-size: 12px; padding: 5px; }
nav .menu ul { list-style: none; }
nav .menu li { display: block; float: right; }
nav .menu a { display: block; float: left; margin-right: 5px; padding: 0px 15px; text-decoration: none; }
nav .menu a:hover { text-decoration: underline; }
#wrapper { width: 940px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; }
#headerlogo { position: absolute; margin-top: 4px; margin-left: 5px; }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/theme.css" />
<title>My Webpage - Home</title>
</head>
<body>
<div id="wrapper">
<header>
<div id="headerlogo"><img src="images/logo.png" width="237" height="271" alt="" /></div>
<h1><a href="#">Company Website</a></h1>
<h2>Your tag line here...</h2>
</header>
<nav>
<ul class="menu">
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
</ul>
</nav>
</div>
</body>
</html>
