Flexboxを使用し画像を横並びにする方法

Visual Studio Codeでホームページを作成しています。

CSSで、flexぼｘを使用しているのに横並びにならずに困っています。
何が原因なのかもわからずです。

HTML
1    <main>
2      <section class="subtance">
3        <h2 class="subtance-heading">活用・採用事例</h2>
4
5        <figure>
6          <div href=""><img src="img/活用・採用事例1.JPG" alt="文字の代替">
7            <figcaption class="decorator">詳細はこちら＞</figcaption>
8          </div>
9        </figure>
10
11        <figure>
12          <div href=""><img src="img/活用・採用事例2.JPG" alt="文字の代替">
13            <figcaption class="decorator">詳細はこちら＞</figcaption>
14          </div>
15        </figure>
16
17        <figure>
18          <div href=""><img src="img/活用・採用事例3.JPG" alt="文字の代替">
19            <figcaption class="decorator">詳細はこちら＞</figcaption>
20          </div>
21        </figure>
22
23        <figure>
24          <div href=""><img src="img/活用・採用事例4.JPG" alt="文字の代替">
25            <figcaption class="decorator">詳細はこちら＞</figcaption>
26          </div>
27        </figure>
28
29      </section>
30      <div class="sidebar"></div>
31    </main>
32

CSS
1main {
2  width: 900px;
3  display: flex;
4  flex-wrap: center;
5  margin: 10 auto;
6  padding: 70px 15px;
7}
8
9.subtance {
10  width: 600px;
11  margin-right: 150px;
12}
13
14.subtance-heading {
15  border-bottom: 8px solid #c0c0c0;
16  text-align: center;
17  line-height: 0.5%;
18}
19
20main figure {
21  width: 200px;
22  position: relative;
23  display: flex;
24  align-items: center;
25  justify-content: center;
26}
27
28main figure img {
29  width: 100%;
30  display: flex;
31  justify-content: center;
32}
33
34main figure figcaption {
35  font-size: 20px;
36  color: #ffffff;
37  position: absolute;
38  top: 0;
39  display: flex;
40  width: 100%;
41  height: 100%;
42  margin: 0;
43  align-items: center;
44  justify-content: center;
45}