flexを用いた項目を中央に揃える方法

現在、下記サイトの模写コーディングを行っていますが、行き詰まっている箇所があります。
https://isara.life/
上記サイトへアクセスして頂き、下にスクロールしていくと、「創業メンバー」というコンテンツがあります。
そこにある4つの画像と紹介文の項目のように、上下に二項目ずつ並べることはflexを用いてできました。
しかし、widthを50%に指定して、flex-wrapにて下に項目2つ回り込ませたせいなのか、見本のように項目を中心に揃えることができません。中央に大きな空白がある状態になっています。

HTML
1<div class="members"> 
2
3    <div class="member">  
4      <div class="member-icon"> 
5        <img src="https://isara.life/wp-content/themes/isara_v2/img/keisuke_someya.jpg">
6        <p>現役フリーランスから学べる</p>
7      </div>
8      <p class="member-contents">ISARA (THAILAND) CO.,LTD.の代表です。学生起業の後にリクルートへ就職、その後独立し、海外移住しました。今はフリーランスとしてリモートワークで日本円を稼ぎ、外国通貨に変えて使い、海外を旅してます。営業、ブログPVアップ(最高月間150万PV)、ビジネス構築が専門です。</p>
9    </div>
10
11    <div class="member">  
12      <div class="member-icon"> 
13        <img src="https://isara.life/wp-content/uploads/2018/10/yuki.png">
14        <p>実践を通じて学べる</p>
15      </div>
16      <p class="member-contents">バンコクのシェアハウスのオーナーをやりながら一年の大半をタイで過ごしています。 大学時代から今に至るまでネットだけで生計を立てているので、自由歴だけは講師陣の中で最長です！ 母親がタイ人という事もありタイには精通してますので、こちらでの生活のサポートはお任せください！。</p>
17    </div>
18
19
20    <div class="member">  
21      <div class="member-icon"> 
22        <img src="https://isara.life/wp-content/themes/isara_v2/img/shohey.png">
23        <p>授業料が実質０円</p>
24      </div>
25      <p class="member-contents">月の半分は東京の会社にリモートで勤めつつ、フリーでも活動しているエンジニアです。Laravel・WordPressでのWeb制作がコアスキル。立ち上げメンバーとしてカリキュラム原案制作に参画し、現在は外部アドバイザーをしています！</p>
26    </div>
27
28
29    <div class="member">  
30        <div class="member-icon"> 
31          <img src="https://isara.life/wp-content/themes/isara_v2/img/manabu.png">
32          <p>授業料が実質０円</p>
33        </div>
34        <p class="member-contents">アドバイザーとして参画しました。新卒で海外就職して１１ヶ月後に退職。今は日本にいたり海外にいたりでゆるくフリーランスをしています。 お仕事はWebマーケティングとプログラミングが専門領域です</p>
35      </div>
36
37```css
38
39コード
40.member-icon img {
41  border-radius: 50%;
42}
43
44.members {
45 display: flex;
46flex-wrap: wrap;
47justify-content: center;
48align-items: center;
49}
50
51.member {
52  flex: auto;
53  width: 50%;
54  text-align: center;
55}
56
57.member-contents {
58  width: 350px;
59  display: inline-block;
60}
61------------------------------------
62float:left等を使ってみたりと様々な方法を検索して試しましたが上手くいかず、flexboxを用いてやっと項目を上下に並べることができましたが、どうやっても中央の空白を埋めれません･･･｡
63中央にできてしまう空白を埋めて、項目同士を中央に寄せる方法をご教示頂きたいです。よろしくお願い致します。

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

回答1件

ベストアンサー

模写先は外側のブロックのmax-widthを設定して、margin: 0 auto; で中央寄せしていますね。

css
1.members {
2    display: flex;
3    flex-wrap: wrap;
4    justify-content: center;
5    align-items: center;
6    max-width: 800px;
7    margin: 0 auto;
8}