モバイルで改行されずに横長に表示される

こんにちは＾＾

ご自身で追加した下記コードが原因です。

#header-in, #navi-in, #body-in, #footer-in{
  width: 1130px;
}

#main {
  width: 800px;
}

#sidebar {
    width: 310px;/*←幅を狭くする*/
}
#header-in, #navi-in, #body-in, #footer-in{
  width: 1150px;
}

#main {
  width: 820px;
}

上記を削除して、メディアクエリを追記したものを記入してください。

@media screen and (min-width: 740px) {

	#header-in, #navi-in, #body-in, #footer-in{
		width: 1130px;
	}

	#main {
		width: 800px;
	}

	#sidebar {
		width: 310px;/*←幅を狭くする*/
	}
	#header-in, #navi-in, #body-in, #footer-in{
		width: 1150px;
	}

	#main {
		width: 820px;
	}

}

全ての幅を指定しているので、はみだしてます。タブレットサイズでも多分 はみ出ると思うので確認して、必要に応じてmax-width: 100%;など追記してもらえますか？

かうたっく 様

すみません。
一瞬で解決しました。

そして自分が重複して記述していたことにも改めて気づきました。

本当にありがとうございます。

参考までに教えてほしいのですが

前作のsimplicityの時は同じ記述でうまく動作していましたが

今作では動作しなくなったのは、よりモバイル対策が講じられている為でしょうか。

私が持っているSimplicity以前のバージョンでしたらnarrow.css/*640px以下のおスタイル*/・mobile.css/*モバイル用外部パーツ微調整*/に

div#header-in, div#navi-in, div#body-in, div#footer-in {
  width: 100%;
}

モバイルの環境ではwidth: 100%;にと指定があるからです。style.cssでwidth:****pxと指定があってもスマホ（640pxやモバイルと指定されたデバイス幅では）幅100%にする。みたいな感じです。

#header-in, #navi-in, #body-in, #footer-in{
  width: 1130px;
}

#main {
  width: 800px;
}

#sidebar {
    width: 310px;/*←幅を狭くする*/
}
#header-in, #navi-in, #body-in, #footer-in{
  width: 1150px;
}

#main {
  width: 820px;
}

このように幅の変更をしてた記載を書いても、下記コードを入れるだけで、スマホでもはみ出しません。初めから書いていれば良かったですね。ボケてて気付きませんでした＾＾；

div {
	max-width: 100%;
}

全部divで囲まれているので、(レスポンシブwebデザインの場合)最大幅を100%と指定すればはみ出しません。

※幅1130pxと指定があるのに、その幅より小さいデバイス480pxでアクセスすると　はみ出す。それを最大値100%と指定すれば、はみださない。

自分が重複して記述していたことにも改めて気づきました。

CSSでスタイルや幅は変更できるので、それを重複というなら
私は重複しまくって、スタイルを変更してます＾＾
スタイルの変更はしやすいので、色々試すのも良いかもしれません❦

いつも以上に頭が回らないので、納得・わかってもらえるのか、自信ありません。max-widthで不明な点は、スマホ　はみ出す　？？などで検索すると、内容に見合ったわかりやすい内容がたくさんあると思います❦