部分の背景色を白くしました。今回は、この部分の横幅を固定して、ページ全体のセンターに配置しましょう。base.cssに以下の記述を追加してください。/*リンクにマウスが乗ったら背景画像を変更する*/}保存をしたらブラウザで表示してみましょう。背景が白いメインコンテンツ部分の横幅が固定されて、センタリングされれば成功です。auto;でボックスをセンタリングしています。これは「横幅1000ピクセルのボックスを、左右マージンを自動算出して配置しなさい」と指定していることになります。部分は、0とautoの2つの値を半角スペース区切りで指定しています。[左右]のマージンを指定したことになります。上下マージンを無しにして、左右マージンを自動算出にするという指定です。パソコン上のブラウザの画面は1000ピクセルを超えることが多いため、余った部分がマージンとしてボックスの左右に均等に振り分けられます。結果として、横幅1000ピクセルのボックスが、親要素に対してセンタリングされることになります。ブラウザの初期スタイルサンプルサイトのコンテンツ部分をセンタリングして背景色を白くしましたが、そうしたことで、メインメニュー部分の表示がセンターからずれていることがはっきりと分かるようになりました。できれば紺色のメインメニュー部分を白い背景の中央に配置したいのですが、現状では右にずれてしまっています。これは、ul要素には、ブラウザの初期スタイルとして左余白が設定されているためです。メインメニュー部分に使用したul要素は、CSSの指定でリストマーカー無しにしましたが、本来リストマーカーが表示される左側が余白として空けられたままになっているのです。このようなブラウザの初期スタイルは、ul要素に限らず、他の要素でも設定されていることがあります。スタイルシートを指定しなくても、一般的なブラウザではh1要素は大きく太字で表示され、blockquote要素はインデント(字下げ)されて表示されます。制作者側で特にCSSを指定しなくても、ある程度読みやすくレイアウトされるので便利でもあるのですが、ピクセル単位でレイアウトを作成していく際には、このスタイルの初期設定が邪魔になることもあります。制作者の意図とは違うスタイルがあらかじめ設定されていたり、ブラウザごとにデフォルトスタイルが微妙に異なっているためです。次回は、このブラウザの初期スタイルの余白をリセットするCSSソースを追加します。ブラウザの初期スタイルを一旦リセットしてから、制作者のCSSソースを指定してウェブデザインを進めていくやり方は、ウェブ制作で用いられることの多い一般的な手法となっています。