メインビジュアルの配置
今回は、#top内のロゴと#header内のメイン画像を配置します。
#top、#headerともにボックスの中に横幅を固定した透明のボックスを入れてロゴや画像のみを横幅に合わせています。（チャプター3の序盤で行った入れ子構造です）
内側の透明のボックスは.box-inというClassで定義しているので、#top、#headerの両方で使い回せます。
では、それぞれのボックスに以下のようにスタイルを指定しましょう。
style.css
#header{
background:url(img/bg.png);
}
.box-in{
width:960px;
margin:0 auto;
}
メイン画像が入る#headerには背景画像がついていますが、#topに背景は無いので、特にスタイル指定は必要ありません。
確認
ロゴとメイン画像がデザインの幅（960px）に揃いましたね。
見本ページを新しいタブで開く次のページでは、ロゴとメイン画像の間にある横並びのメニューを作成します。