スマホ表示の幅

どうもヘッダー画像が大きいようなきがするのですが。

状態がわからないので(おそらくはみ出しているんでしょうけれども)、問題の出てるサイトアドレスか、スクリーンショットをひとまず公開してもらえると助かります。
原因がわからない場合もありますが、たいていは見つかるのではなかろうかと。

> ヘッダー画像が大きいようなきがするのですが

画像にしてもヘッダー画像にしても、親要素の幅に対して100%表示かと思います。なのでヘッダー画像が大きいと言うよりは、その他の要素がどこかはみ出していて、幅がそこに合わさり、結果的にヘッダの幅も大きくなっているのではなかろうかと思います。

ヘッダー画像が背景で入っている場合は確実に親の幅に合うようになっていると思います。imgで入っている場合は画像自体が大きくて親要素を押し広げている場合もあります。

親の幅に合うようになっている場合、何かしらの要素がpxでサイズを持っていて横にはみ出しているような場合、あるいはbox-sizing:border-box;が指定されていない要素でwidthに値があってpaddingを指定している場合要素は外に広がります。
box-sizing:border-box;が設定されている要素はwidthに合うように内側にpaddingを取りますが、この指定がないと(box-sizing:content-box(ブラウザのデフォルトはこちら)になり)中の要素の幅がwidthの値になってpadding分は外に広がるのです。

これらによって広がった要素に、他のwidth:100%で指定されている要素(#header-in、#body-in等)が広がっているのだろうと思いますが、何が原因でそうなっているのかは見てみないとわかりません。

デベロッパーツールでそれらしいものを順番に調べていくか、隈なく調べていくか、htmlソースを開いてpx指定のものを検索しアタリをつけていくかなどして原因を探るしか無いのではなかろうかと。

お世話になります。ＵＲＬは

http://stjohngogarty.com/

になります。よろしくお願いいたします

例えば こちら のページで言うと、h2のマージンの問題ではみ出ているようです。

.article h2 {
  margin: 30px -19px 10px;
  padding: 15px 20px;
}

スマホサイズの時に#mainのpaddingは10pxで設定されているので、上記の場合、-19pxの部分がはみ出てます。PC表示と同じ感じにするのであれば、

.article h2 {
  margin: 30px -9px 10px;
  padding: 15px 10px;
}

こんな感じかと思います。ここらはデザインによって色々といじってみてください。
.article h2だけかと思うんですが、ネガティブマージンは色々と問題が出てしまう可能性があるので注意して設定してください。

直りました。助かりました。大変ありがとうございました。