レイアウト（Layout）widthの変更

試しに
親スタイルシートの「レイアウト」を
そのまま子スタイルシートにコピペしても
同じ症状がでます

レイアウトのカスタマイズは無理みたいです

スマホで#mainがはみ出す理由があるとしたら、

・view portが正しく設定されていない
・メディアクエリが正しく書けていない
・mobile.cssを利用してメディアクエリを使っていない場合は、mobile.cssが読めていない
・上記内容は正しくかけているがjQueryなどにエラーが出ていてcssも道連れになっている
・これ以外があるとすればキャッシュ系の問題

これぐらいです。

上記が正しく動いていて#mainがはみ出すことはまずありえません。
なぜなら#mainはwidthが設定されていないかwidth:100%だからです。100%の設定がはみ出すのはその親要素が100%より大きなサイズのpxで指定されています。
何かしらの端末の画面幅が仮に440pxだとして、width:100%の#mainが画面からはみ出るということは、その親要素の何かが440pxより大きなサイズになっているということです。

正しくcssがかけていればそういうことはまずありえないですし、何かが親要素を押し広げているような場合はレイアウトの設定関係なくはみ出ます。それはレスポンシブのcssとしては正しく書けていない状態です。

何が押し広げているか、あるいはどこの何が何が問題があるかはサイトを見ないとわかりませんので、そこらはご自身で確認してもらう他ありません。

キャッシュが残っている場合もあるので、違う環境(端末)からアクセスして確認するかキャッシュをしない環境で確認するかして確かめるのと、利用されている場合、プラグイン停止だけではなくftpで余計なキャッシュファイル等は作られていないかも確認しておくほうが良いかと思います。

cssは正しくかけているはずなのに動作しない場合はjQuery等スクリプト部分も疑うべきです。エラーによって一部読み込まないだけでも画面全体に問題が及ぶ場合があります。cssでも最終行以外の;忘れはエラーで、そこで読み込みが止まることもあります。

cssはhtmlに直で書いてあるものが一番優先される傾向にあります。style.cssでいくら設定してもstyle.cssでは上書きできない要素もあります。何かしらのタグの閉じ忘れやタイプミスが影響して正しくない状態をブラウザが補完して何とか表示している場合もあります。

全部を確かめるのは難しいですが、ご自身が手を入れられた箇所はチェックするべきです。
このように調べるべき点は多岐にわたります。

スマホの時に正しく動くかどうかは親テーマのスタイルシートを子テーマにコピーするのではなく、親テーマを有効にして確認します。
この時カスタマイズしていない親テーマが正しく動作しているのであれば、子テーマを有効にしても同様の状態になるはずです。子テーマは親テーマの状態を継承しているので。

そこをカスタマイズされて動作しないという場合は、カスタマイズが正しく動作していないという事になります。

なんでだろ～

子スタイルシートから「レイアウト」だけ消すと
スマホでレスポンシブになるのに

試しに
「レイアウト」を親からまるごとコピペしても
スモホでmainだけがはみでる
ヘッドとフッターはレスポンシブなのに･･

もちろん
親テーマは正しく動作します

ヘッダー・フッターが画面幅にあっているなら、#mainの中に#mainを押し広げている(画面サイズが変わっても元のpxのままの)要素があるんだと思います。

親テーマが正しく動作するなら、子テーマのcssに問題があるんだろうと思いますが、
> 子スタイルシートから「レイアウト」だけ消すと
この部分に何が書いてあるのかが問題です。

simplicity2の子テーマstyle.cssは基本最終出力のcssと言っても良いようになってます。なので、子テーマの問題部分が本来レスポンシブになっているものを上書きしてレスポンシブを解除している可能性が高いです。

1系はstyle.cssが必ずしも最後に読み込まれるわけではなかったので、本来書き方がおかしかったもの(何かしらのプロパティとか)がたまたま有効になっていなかっただけかも知れません。

■ヒントとして
widthは基本的に、100%にしておきます。サイズはmax-widthで固定します。つまり、

#main {
  width: 100%;
  max-width: 740px;
}

これ基本で、仮にスマホにした時なら、

@media screen and (max-width: 480px){
  #main {
    max-width: 100%;
  }
}

こう書けば、100%以外はありえません。それでも#mainが押し広げられる場合は、#mainの中にpx指定で480px以上の何かしらがあるんだろうと思います。それを画面に合うようにサイズの変更をしないといけないのではなかろうかと想像します。

あくまで想像です。

何がはみ出しているかを調べるにはchromeのデベロッパーツールでモバイルエミュを駆使して、ctrl + Aから全体を範囲選択し、スクロールではみ出している右側に何があるかを調べます。スクロールできない場合は、どこか親要素にoverflow: hiddenが入っていると思うので、それをデベロッパーツールで解除してスクロールさせます。

何が#mainを押し広げているかがわかればそれをスタイルするだけです。あるいは、すでにカスタマイズしてスタイルしてあるプロパティの見直しをします。

なんでだろ～

親スタイルシート直で「レイアウト」変更すると
スマホでレスポンシブになるのに

子スタイルシートで「レイアウト」変更すると
レスポンシブにならない

1系ではできたのに..
私だけ？