ブラウザ幅いっぱいにヘッダーやフッターを広げる

イチからサイトを作っております。

ブラウザ幅いっぱいに、ヘッダーやフッター等を広げることについてなのですが、
こちらのサイト様を参考にさせていただきました。↓

http://detarame.moo.jp/2010/12/20/%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%80%81%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC%E3%82%92%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%B9%85%E3%81%84%E3%81%A3%E3%81%B1%E3%81%84%E3%81%AB%E3%81%99%E3%82%8B/

同じように製作してみたのですが、どうしてもブラウザの端っこに余白が出来てしまいます。
フルスクリーンでも、縮めても同じように余白ができてしまいます。
しかし、ダッシュボードからの「背景」の設定で色を設定した場合のみ、その余白が埋まるような形です。

php（ここではヘッダー枠を二重にして一つをめいいっぱい広げ、一つを幅指定しました。）としては、

<!–ヘッダーの外枠–>
<div id =”katuo”>
<!– ヘッダー –>
<div id=”header”>
<h1>“>
<?php bloginfo(‘name’); ?></h1>
<p id=”desc”><?php bloginfo(‘description’); ?></p>
<?php if(has_post_thumbnail($post->ID)): ?>
<p><?php echo get_the_post_thumbnail($post->ID); ?></p>
<?php else: ?>
<?php if(get_header_image()): ?>
<p id=”image”><img src=”<?php header_image(); ?>” alt=”*” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” /></p>
<?php endif; ?>
<?php endif; ?>
</div> <!– headerくくりの終わり –>
</div><!– katuoくくりの終わり –>
<!– コンテナ –>
<div id=”container”>
…
と言う風に続いていきます。全てを包括するようなボックスは指定していません。

ＣＳＳでは、

/* ヘッダーの外枠*/
div#katuo { background-image : url(images/sora1.png);margin-top:-10px;
background-repeat: repeat-x;
width: 100%;min-width:850px;}

/* コンテナ */
div#container {width: 850px;
margin:auto;}

/* ヘッダー */
div#header {width:850px;margin:auto;}
div#header h1 {width:300px;
height:60px;
text-indent:-999px;
background-image:url(images/banner.png) left top no-repeat;
font-size: 10px;
margin: 0;
float: left;
margin-bottom: 4px}

（以下、続く）

というようになっています。
どこがおかしいのか、よくわからず、困っております。

IE : 8
PHP : 5.2.17
MySQL : 5.1
さくらレンタルサーバー（スタンダード）を使用しております。
テーマは、冒頭で述べたように、オリジナルで自作したテーマを使用しています。

よろしくお願いします。