Body部分を中心に寄せられません。

前提・実現したいこと

HPをレスポンシブ対応にしようとしています。
Body部分（Main_box)に要素を2つ（ニュース部分とリンク部分）を横並びに置いているのですが、
幅を小さくすると右側についていたリンク部分がニュース部分の下に落ちるようになっています。

ただし、下に落ちた後も、ニュース部分が中央によらないため、
右側に謎の余白ができた状態となってしまします。

そもそも、画面の幅が通常サイズの時でも
Body部分が左側に寄ってしまっている状態です。

どう直せばよいでしょうか？

※Left,Rightの頭文字ではないのでご注意ください。
Main-l：右側
Main-r：左側

該当のソースコード（index.html）


<div id="Wrapper">
	<div id="Container">
		<div id="Main_box"> <!--ボディのすべて-->
			<div id="Main_r"><!--ボディの左側すべて-->
				<div id="new">
					<!--省略しますが、通常ここにニュース部分が来ます-->
				</div>
			</div>
			<div id="Main_l"><--!ボディの右側すべて-->
				<div id="Menu">
					<!--省略しますが、通常リンクを掲載-->
				</div>
			</div>
		</div>
	</div>
</div>

該当のソースコード（CSS）


#Wrapper {
	margin: 0px;
	padding: 0px;
	float: center;
	width: 100%;
}

#Container {
	width: 90%;
	padding: 0px 0px 0px 0px;
	margin:auto;
	
}
#Main_box {
	width: 100%;
	padding: 0px;
	margin: 10px auto 60px auto;
	

}

#Main_r {
	max-width:700px;
	padding: 0px;
	margin-right:5px;
	float: left;
	font-size: 10px;
}


#Main_l {
	width:40%;
	max-width:400px;
	padding: 0px;
	margin-left:5px;
	float: left;
}
#Menu {
	width:100%;
	max-width:400px;
	height:600px;
	position:relative;
	padding: 0px;
	margin: 0px;
}

よろしくお願いします。

Yorrie

2020/01/11 04:59

divの閉じタグが不足しているようです。コードの構造はbody > #Wrapper > #Container > #Mainboxと入れ子になっており、 #Mainboxの中には「#Main_r > #new」、「#Main_l > #Menu」の2つが入っているという認識でよろしいですか？

10604594

2020/01/11 05:04

divの件は、内容をカットした際のミスでした。コード構造は、ご指摘の通りです。

Yorrie

2020/01/11 05:22 編集

ありがとうございます。もひとつ確認ですが、右側リンク部分を下にカラム落ちさせるとき、具体的に「画面幅が○○○px以下のときに表示を変える」というのは決まっていますか？

hatena19

2020/01/11 05:41

質問は編集できますので、不足している閉じタグを追加してくれませんか。また、HTMLに全角空白が紛れてますが、実際のHTMLにも全角空白があるのですか。ないなら、これも削除しておいてください。

10604594

2020/01/11 05:44

>TatamiSteakさん 1160以下の場合に下に落ちているように思いますが、特に指定していないと思いまいす。

10604594

2020/01/11 05:47

>hatena19さん不足とじタグは先程修正しております。空白が紛れている分は、体裁整えました。

hatena19

2020/01/11 06:10

#Main_r には幅を設定せずに、#Main_l のみ幅40%にしてますが、#Main_r の内容次第でレイアウトは変わりますが、それでいいのですか。1160px以下でカラム落ちしているのは偶然ですが、ご希望は1160px以下で1カラムにしたいということでよろしいですか。また、 float: center; という指定は無効です。float で指定できるのは left right none の３つです。上記の点を含めて具体的にどのようなレイアウトがご希望なんですか。

行動規範の内容に同意します

回答1件

ベストアンサー

ご希望のレイアウトが不明瞭ですか、とりあえずアドバイスだけ。
横並びをfloatで設定するのはもう古い手法です。
現在ならCSS Flexboxを使うと簡単に横並びにできますし、レイアウトの自由度も高いです。

現状の float はすべて削除して、下記のように設定してみてください。
これでカラム落ちしてもに中央寄せになります。
その上で、もしご希望と異なればその部分を質問してください。

css
1#Main_box {
2  width: 100%;
3  padding: 0px;
4  margin: 10px auto 60px auto;
5  display: flex; /*横並び*/
6  flex-wrap: wrap; /*折り返しする*/
7  justify-content: center; /*中央寄せ*/
8}