wrappaerで囲って中央寄せにしたい

Question

前提・実現したいこと

バックグラウンドをホットピンクに設定しております。
main2,main3は左右に配置できたのですが、
main1,main4を中央寄は中央寄せにならずなぜか端に寄ってしまいます。

発生している問題・エラーメッセージ

該当のソースコード

.select {
	width: 900px;
}

.select-wrapper{
	width: 900px;
	margin: 0 auto;

}


.main1 {
	width: 800px;
	height: 250px;
	background-color: gray;
	clear: both;
}

.main2 {
	width: 380px;
	height: 150px;
	background-color: pink;
	float: left;
}


.main3 {
	width: 380px;
	height: 150px;
	background-color: blue;
	float: right;
	
}


.main4 {
	width: 800px;
	height: 250px;
	background-color: yellowgreen;
	clear: both;
}

		<div class="select">
			<div class="select-wrapper">
				<div class="main1"></div>
				<div class="main2"></div>
				<div class="main3"></div>
				<div class="main4"></div>
			</div>
		
		</div>

試したこと

.select {
width: 900px;
}

.select-wrapper{
width: 900px;
margin: 0 auto;

}

これで中央寄せにできると習ったのですがなぜか中央寄せになりません。
分かる方いらっしゃいましたらご教授いただきたいです。
よろしくお願いいたします。

Answer 1

select-wrapper が中央表示になって
select-wrapperの中のmain1とmain4が中央表示になってません。
main1とmain4 に margin:0 auto;
を追加してください。

Answer 2

margin: 0 auto;をつける場所が違います。

wrapperじゃなくて中身のコンテンツであるmain1とmain4につけてください。