要素がブラウザの幅に合わせて中央揃えになるようにしたい

画像のように画面の幅が変わっても要素を中央に配置する場合、以下のコードのどこをどのように変更すればいいのでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta name="description" content="課題①-1">
8  <title>課題①-1</title>
9  <link rel="stylesheet" href="/sanitize.css">
10  <link rel="stylesheet" href="style.css">
11</head>
12<body>
13  <header>
14   <div class="menu-bar">
15     <img  id="header-logo" src="img/yEVqXX.png" alt="イチヨンヨンラボ">
16      <nav>
17          <ul id="menu">
18            <li>
19              <a class="menu-item1" href="#">ABOUT</a>
20            </li>
21            <li>
22              <a class="menu-item2" href="#">NEWS</a>
23            </li>
24            <li>
25              <a class="menu-item3" href="#"> SERVICE&amp;PRODUCT</a>
26            </li>
27            <li>
28              <a class="menu-item4" href="#">CONTACT</a> 
29            </li>
30          </ul>
31      </nav>
32    </div> 
33    <div class="test"></div>
34  </header>
35
36  <main>
37
38  </main>
39
40  <footer>
41    
42  </footer>
43</body>
44</html>

CSS
1header {
2  background-color: #F2F3F7;
3  top: -176px;
4  left: 150px;
5  width: 100%;
6  height: 799px;
7  display: flex;
8  justify-content: center;
9}
10
11#header-logo {
12  top: 80px;
13  left: 187px;
14  width: 168px;
15  height: 60px;
16  padding-top: 21px;
17}
18
19.test {
20  top: -176px;
21  left: 150px;
22  width: 100%;
23  height: 999px;
24  background: transparent url('img/メインビジュアル.png') 0% 0% no-repeat padding-box;
25  background-position: absolute;
26  position: absolute;
27  z-index: 1;
28}
29
30.menu-bar {
31  top: 59px;
32  left: 150px;
33  width: 975px;
34  height: 77px;
35  box-shadow: 4px 4px 1px #00000029;
36  position: absolute;
37  background-color: #FFFFFF;
38  display: flex;
39  justify-content: space-around;
40  z-index: 2;
41}
42
43#menu {
44  list-style:none;
45  display:flex;
46  }
47
48#menu li{
49  text-align:center;
50  display: flex;
51  padding-right: 40px;
52  padding-left: 40px;
53  letter-spacing: 0px;
54  position: relative;
55  }
56
57#menu a {
58  text-decoration: none;
59  color: #000000;
60}
61
62#menu li:not(:first-child)::before{
63  content: "|";
64  position: absolute;
65  top: 10px;
66  left: 0px;
67}
68  
69  #menu .menu-item1::after {
70    display:block;
71    font-size:0.7em;
72    color: #777777;
73    text-align: center;
74    content: "企業情報";
75  }
76
77  #menu .menu-item2::after {
78    display:block;
79    font-size:0.7em;
80    color: #777777;
81    text-align: center;
82    content: "ニュース";
83  }
84
85  #menu .menu-item3::after {
86    display:block;
87    font-size:0.7em;
88    color: #777777;
89    text-align: center;
90    content: "サービス＆製品情報";
91  }
92
93  #menu .menu-item4::after {
94    display:block;
95    font-size:0.7em;
96    color: #777777;
97    text-align: center;
98    content: "お問い合わせ";
99  }

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

回答1件

ベストアンサー

一番ラクなのはmargin:auto

CSS
1<style>
2body{
3background-Color:yellow;
4margin:0;
5padding:0;
6}
7#main{
8background-Color:lime;
9max-width:300px;
10margin:auto;
11}
12</style>
13<body>
14<div id="main">hoge</div>
15</body>