課題　 インテリアショップ a calm

課題

構造を考えながら、どうにか形にしたけれど、navとaddressの右端が揃わないのが気持ち悪い。
addressにmarginっていうのは違うような気がしますが、取り敢えずアップします。

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Conent-Style-Type" content="text/css" />
<title>インテリアショップ a calm</title>
<link href="css/base1.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>

<body>

<div id="container">

<div id="content">

<h1>インテリアショップ a calm・・・北欧家具・北欧雑貨</h1>

<dl>
<div class="list">
<dt><img src="images/info.gif" width="398" height="58" alt="●インフォメーション"></dt>
<dd>インテリアショップ カームでの商品入荷情報、イベント、HPの更新など。</dd>
	<div id="inner">
	<dl>
	<dt>10.Dec.07</dt>
	<dd>グスタフスベリ社　リンドベリシリーズ（復刻版）<br>の商品が再入荷しました。</dd>
	<dt>02.Dec.07</dt>
	<dd>クロックス　キッズ マンモスが入荷しました。</dd>
	<dt>02.Dec.07</dt>
	<dd>北欧リペア家具 新商品入荷しました。</dd>
	<dt>01.Dec.07</dt>
	<dd>【net shop】ムーミンマグ・プレートをUPしました。</dd>
	</dl>
	</div>
<p>
<img src="images/071221g.jpg" width="400" height="121"f alt="ムーミンマグ・プレートs">
</p>
</div>

<div class="list">
<dt><img src="images/concept.gif" width="398" height="58"f alt="●コンセプト"></dt>
<dd>カームのインテリアについての「想い」を感じてください。</dd>
</div>

<div class="list">
<dt><img src="images/shop.gif" width="398" height="58"f alt="●ショップ"></dt>
<dd>インテリアショップ カーム店内のイメージ写真と会社案内。</dd>
</div>

<div class="list">
<dt><img src="images/brands.gif" width="398" height="58"f alt="●取り扱いブランド紹介"></dt>
<dd>北欧から日本までカームのセレクトしているブランドの一部をご紹介しています。</dd>
</div>

<div class="list">
<dt><img src="images/designers.gif" width="398" height="58"f alt="●デザイナー紹介"></dt>
<dd>インテリアの歴史に名を残す「デザイナー」のご紹介。</dd>
</div>

<div class="list">
<dt><img src="images/products.gif" width="398" height="58"f alt="●商品紹介"></dt>
<dd>北欧家具・雑貨をはじめとした取り扱い商品の一部をご紹介しています。</dd>
</div>

<div class="list">
<dt><img src="images/shop.gif" width="398" height="58"f alt="●店舗へのアクセス"></dt>
<dd>インテリアショップcalm までの交通機関のご案内です。</dd>
</div>

<div class="list">
<dt><img src="images/blog.gif" width="398" height="58"f alt="●ブログ"></dt>
<dd>カームスタッフの「ブログ」です。</dd>
</div>

<div class="list">
<dt><img src="images/contact_us.gif" width="398" height="58"f alt="●お問い合わせ"></dt>
<dd>インテリアや雑貨・家具、その他カームに関するお問い合せはこちらまで。</dd>
</div>

<div id="nav">
<p>HOME | INFO | BRANDS | DESIGNERS | PRODUCTS | ACCESS | BLOG | CONTACT</p>
</div>

<address>Copyright(c)2007 インテリアショップxxxxxAll rights reserved.</address>

</div>
</div>
</body>
</html>

CSS

@charset "UTF-8";

*  {
	margin: 0;
	padding: 0;
}

ul {
	list-style-type: none;
}

img {
	border-style: none;	
}	

body {
	color: #444;
	font-size: 0.8em;
	font-family:
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ 角ゴ Pro W3",
		Meiryo,
		"メイリオ",
		Osaka,
		"MS PGothic",
		"ＭＳ Ｐゴシック",
		sans-serif;
	background-color: #fff;
}

#container {
	width: 870px;
	height: auto;
	margin: 50px 0 100px 100px;
	background-image: url("../images/side_image.gif");
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #fff;
	border-right: 30px solid #D8E9D7;
}

#content {
	margin: 0 30px 0 200px;
}

#content h1 {
	font-size: 1.25em;
}

.list dt {
	margin: 35px 0 0 0;
}

.list dd {
	font-size: 1em;
	font-weight: bold;
	margin: 10px  0 30px 0;
}

#inner dt {
	float: left;
	line-height: 1.2;
	margin: auto;
}

#inner dd{
	color: #7ba58f;
	line-height: 1.2;
	padding: 0 0 0 80px;
}

#nav {
	letter-spacing: 0.1em;
	margin: 0 0 10px 0;
}

address {
	font-size: 0.8em;
	font-style: normal;
	text-align: right;
	margin: 0 40px 0 0;
}