タイトル画像の説明

お姫様のブログ「S*PRI 〜WEBデザイナーができるまで〜」のタイトル画像の説明です。
タイトル画像を今まではh1の背景でやっていましたが、それをimgに変更したため、いろいろと問題が起こったようです。
現在のh1のcss

h1 {
font-size: 170%;
background-color: #7a2e4b;
text-align: right;
font-weight: normal;
font-family: "Arial","Helvetica","ＭＳ Ｐゴシック",sans-serif;
letter-spacing: 0.25em;
color: #ede7cf;
padding: 70px 3px 6px 0px;
margin: 0px;
width: auto;
}

タイトルの文字をtext-alignで右に寄せて、paddingで下に寄せてたようです。(もともとのテンプレートが)
なので画像は右下にあります。(文字と画像が入れ替わっただけの状態)
　
画像とh1をピッタリでいいならば

h1 {
padding: 0px;
}

でオーケーです。

しかし前にコメントに書いたと思いますが、幅がブラウザの大きさに合わせるようになっているのでタイトル画像だけ仲間外れみたいになってしまいます。
なので全部の幅を同じにすればいい！(勝手な解釈ですが・・・)

div.adminmenu {
width: 804px;(ここだけはpaddingで左右8pxとってあるため804px)
}
h1 {
width: 820px;
padding: 0px;
}
.hatena-body {
width: 820px;
}

で同じになるはずです。
　
あと僕が気になったのは中央寄せでも左寄せでもなくてなんか微妙な位置にある事です。
なので、margin: 0px auto;を指定します。(中央寄せです)

body {
padding:0px;(なんだか左右に8%かけてあったので0に)
}
div.adminmenu {
width: 804px;
margin: 0px auto;
}
h1 {
width: 820px;
margin: 0px auto;
padding: 0px;
}
.hatena-body {
width: 820px;
margin: 0px auto;
}

で出来上がりです。
　
わからない所あったらコメントよろしくです。