htnl5 + css3　ハンドコーディング１次のサイト作りに向けて。（改正版）

ナビゲーションの位置とその中の文字がうまくいかなかった。
後はたぶん平気だと思われます。
ソースコードが変かもしれませんが、、、
非常に難しいですが新しく出来たタグだけ覚えてしまえばいけるかも。。。

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<head>
<title>html5</title>
 <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<!--一応ラッパーでくるんじゃう？-->
<div id="wrapper">
	<!--ヘッダー-->
	<header>
	<h1>REGGAE SOULJAH</h1>
	<p><strong>bigin to reggae</strong></p>
	</header>
	<!--ヘッダー終了-->
  <!--アサイド-->
  <aside>
  <div id="nav_area">
  <nav>
	<ul>
	<li><a href="#">リンク１</a></li>
	<li><a href="#">リンク２</a></li>
	<li><a href="#">リンク３</a></li>
	<li><a href="#">リンク４</a></li>
	<li><a href="#">リンク５</a></li>
	<li><a href="#">リンク６</a></li>
	<li><a href="#">リンク７</a></li>
	</ul>
	</nav>
  <nav>
  <ul>
  <li><a href="#">bunner</a></li>
  </ul>
  </nav>
  </div>
  </aside>
  <!--アサイド終了-->
	<!--セクション-->
	<section>
	<article>
	<hgroup>
	<h2>ROOT ROCK REGGAE</h2>
	</hgroup>
	<p>ここでは様々なREGGAE MUSICを………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………お伝えしていきます。</p>
	</article>
	<article>
	<hgroup>
	<h1>BRAND NEW TUNE</h1>
	<h2>最新のDanceHall tuneを<em>PICK UP!!</em></h2>
	</hgroup>
	<p>2012年６月２８日現在のjamaicaからのHOTな………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………お届け。</p>
	</article>
	<article>
	<h1>80's〜90's DANCEHALL</h1>
	<h2>ここからがダンスホールの始まり</h2>
	<p>reggaeのダンスホールといえばこの時代！！沢山のすごいアーティスト達がひしめき………………………………………………………………………………………………………………………………………………………………そんな感じ？</p>
	</artical>
	</section>
	<!--セクション終了-->
	<footer><p><em>no music no life</em></p></footer>
</div>
</body>
</html>

css ソースコード

<style type="text/css">
<!--
body {
	background:#aaa;
	font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif;
	color:#000;
	margin:20px auto;
	 line-height:1.5em;
	 width:960px;
}
h1, h2, h3, h4, h5, h6 {
	font-family:"Hiragino Kaku Gothic Pro",  Meiryo, sans-serif;
	font-weight:lighter;
}
a:link, a:visited {
    color:#c00;
    text-decoration:none;
}
a:hover {
    color:#0cc;
}
header, nav, section, footer {
    display:block;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 4px #666;
    -moz-box-shadow: 0px 0px 4px #666;
    box-shadow: 0px 0px 4px #666;
    border: 1px solid #d3d3d3;
    background-color: #fff;
    margin:5px;
    padding: 0 20px 10px 20px;
    font-size: 12pt;
    color: #000;
    text-align: left;
}
header {
    text-align:center;
    padding:30px;
    background-image: -moz-linear-gradient(top, #888, #333);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #888), color-stop(1.0, #333));
    background-color: #444;
    border:none;
    color:#fff;
    text-shadow: 0px 0px 4px #000000;
}
header h1, header h2, header h3, header h4, header h5, header h6, header p {
    font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif;
}
header h1 {
    font-size:2.3em;
    text-transform:none;
    letter-spacing:0em;
}
header h2 {
    margin:-10px 0px 20px;
    font-size:1.3em;
}
#nav_area {
	 float: left;
}
nav {
	width:180px;
	height: auto;
	overflow:hidden;
}
#div id=nav_area li{
    height: 200px;
}
section {
    float:right;
    width:656px;
    text-align:left;
    margin-bottom:10px;
}
section h1, nav h1 {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color:#444;
    color:#fff;
    padding:10px;
    margin:10px -10px;
    text-shadow:1px 1px 5px #000;
}
section ul {
    padding:0px;
    list-style:none;
    border-top:1px solid #e7e2d7;
    margin:14px 0px;
}
section li {
    margin:0px;
    padding:0px;
    list-style:none;
}
section li a:link, section li a:visited {
    float:left;
    width:96%;
    padding:3px 1%;
    border-bottom:1px solid #e7e2d7;
}
section li a:hover {
    background:#f2f1ec;
}
section p {
    font-size:0.9em;
    overflow: hidden;
}
article {
    margin:0 0 30px 0;
}
footer {
    clear:both !important;
    padding:10px;
    background-color: #444;
    border:none;
    color:#fff;
    font-size:0.8em;
    text-align:center;
}
footer a {
    margin:0px 5px;
}
-->
</style>