汎用ボックスを中央配置したい

こんにちは。HTMLの勉強中で質問です。
これはとあるサイトの勉強資料のものなのですが、サイトを見ながらやっても上手くいかなかったので教えていただけると嬉しいです。

下記の画像の「コンセプト」と「メニュー」を食事の画像の下の真ん中に表示させたいのですがどうすればよいでしょうか？
いろいろいじってみましたができません。。。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title></title>
6	<link rel="stylesheet" href="css/style.css">
7</head>
8<body>
9	<!-- ここにページの内容を書いていく -->
10	<header>
11	<h1>サンプル食堂</h1>
12	</header>
13
14	<main>
15		<div id="img">
16			<img src="images/shop1.jpg" alt="店の様子2">
17		</div>
18		
19		<div class="consept">
20			<h2>コンセプト</h2>
21			<p>サンプル食堂は、手頃な値段で家庭料理が食べれる食堂です！</p>
22		</div>
23		
24		<div class="menu">
25			<h2>メニュー</h2>
26			<ul>
27				<li>日替わり定食・・・¥500</li>
28				<li>ハンバーグ定食・・・¥650</li>
29				<li>エビフライ定食・・・¥800</li>
30				<li>からあげ定食・・・¥500</li>
31				<li>チキン南蛮定食・・・¥650</li>
32			</ul>
33		</div>
34	</main>
35	
36	<footer>
37		<p>Copyright &copy; サンプル食堂</p>
38	</footer>
39</body>
40</html>

CSS
1@charset "utf-8";
2
3/* ユニバーサルセレクタで余白リセット */
4* {
5	margin: 0;
6	padding: 0;
7}
8
9body{
10	background-color: #f5f5dc;
11}
12
13header{
14	background-color: #eee8aa;
15	height: 50px;
16	line-height: 50px;
17	font-weight: bold;
18	margin-bottom: 30px;
19	text-align: center;
20}
21h1{
22	color: burlywood;
23	font-size: 48px;
24}
25
26h2{
27	border-bottom:  1px solid #000000;
28	margin-bottom: 10px;
29}
30main{
31	margin: 0 auto;
32	width: 700px;
33	text-align: center;
34}
35
36ul{
37	list-style: none;
38}
39
40
41footer{
42	background-color: #eee8aa;
43	height: 50px;
44	line-height: 50px;
45	text-align: center;
46}
47
48#img{
49	margin-bottom: 20px;
50}
51
52.consept{
53	margin-bottom: 100px;
54	margin-right: 20px;
55	width: 250px;
56	height: 120px;
57	float: left;
58}
59
60.menu{
61	margin-bottom: 30px;
62	width: 250px;
63	height: 120px;
64	float: left;
65	text-align: center;
66}
67
68main::after{
69	content: "";
70	display: block;
71	clear: both;
72}

kei344

2020/02/11 02:32

「コンセプト」は「concept」ですよ。

mtmtochus

2020/02/11 02:36

指摘ありがとうございます。直しておきました。本題の回答はおわかりでしょうか？

kei344

2020/02/11 02:39

編集履歴がでていないので、保存されていないと思いますよ。

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

回答1件

ベストアンサー

float: left; で横並びさせてますが、これは現在では古い手法です。
CSS Flexbox を使うと簡単にご希望のことが実現できます。

css
1main{
2    margin: 0 auto;
3    width: 700px;
4    text-align: center;
5    display: flex; /*横並び*/
6    flex-wrap: wrap; /*折り返し許可*/
7    justify-content: center; /*中央寄せ*/
8}
9
10/* 各要素の
11 float: left;
12　不要
13*/
14
15/*以下も不要
16main::after{
17    content: "";
18    display: block;
19    clear: both;
20}
21*/