flexboxの子要素を親要素のちょうど三等分にしたい

「無料でお部屋を掲載」、「ホスティング方法を設定」、「はじめてのゲストが来ます！」のそれぞれのブロックを親要素ulの丁度三等分割にして真ん中に寄せたいです。
親要素ulの幅は1200pxとなっています。そして、前に挙げた三つのブロックであるliの幅はそれぞれ400pxに設定してあります。
しかしグーグルの検証で見てみると、なぜか三つのブロックは384pxになり親要素の中央から少しズレています。この原因がわからなくて困っております。分かる人がいたら、教えて頂けると非常に助かります。

HTML
1<!doctype html>
2  <html>
3   <head>
4      <title>模倣</title>
5       <meta charset="utf-8">
6       <link rel="stylesheet" href="style.css">
7      <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
8     </head>
9<body>
10      <div class="point1">
11       <div class="point1__break"></div>
12       <div class="point1__title">３ステップでホスティング</div>
13         <ul class="point1__steps">
14          <li class="point1__steps__block">
15             <i class="far fa-check-circle fa-3x"></i>
16              <div class="steps__title">無料でお部屋を掲載</div>
17              <div class="steps__txt">共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</div>
18          </li>  　
19          <li class="point1__steps__block">
20              <i class="far fa-check-circle fa-3x"></i>
21              <div class="steps__title">ホスティング方法を設定</div>
22              <div class="steps__txt">スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。</div>
23            </li>  　
24          <li class="point1__steps__block">
25             <i class="far fa-check-circle fa-3x"></i>
26              <div class="steps__title">はじめてのゲストが来ます！</div>
27              <div class="steps__txt">リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</div>
28              <div class="steps__host-check">
29                  <a href="#">ホストをはじめる方法をチェック</a>
30              </div>
31           </li>  　
32        </ul>
33    </div>
34      
35
36</body>
37</html>

SCSS
1*{
2    margin:0;
3    padding:0;
4}
5
6
7.point1{
8     width: 1200px;
9     margin: 0 auto;
10    &__break{
11        width: 100px;
12        height: 2px;
13        border: 1px solid black;
14        margin: auto;
15    }
16    &__title{
17        text-align: center;
18        font-size: 60px;
19        font-weight: bold;
20    }
21    
22    &__steps{
23        display: flex;
24        width: 1200px;
25        list-style: none;
26        &__block{
27            width: 400px;
28            box-sizing: border-box;
29            .steps__title{
30                font-size: 23px;
31                font-weight: bold;
32                margin:20px 0 20px 0;
33            }
34            .steps__host-check{
35                margin-top: 20px;
36                a{
37                   color: green;
38                   text-decoration: none;
39                }
40                a:hover{
41                    text-decoration: underline;
42                }
43            }
44        }
45    }
46}

CSS
1* {
2  margin: 0;
3  padding: 0;
4}
5
6.point1 {
7  width: 1200px;
8  margin: 0 auto;
9}
10.point1__break {
11  width: 100px;
12  height: 2px;
13  border: 1px solid black;
14  margin: auto;
15}
16.point1__title {
17  text-align: center;
18  font-size: 60px;
19  font-weight: bold;
20}
21.point1__steps {
22  display: flex;
23  width: 1200px;
24  list-style: none;
25}
26.point1__steps__block {
27  width: 400px;
28  box-sizing: border-box;
29}
30.point1__steps__block .steps__title {
31  font-size: 23px;
32  font-weight: bold;
33  margin: 20px 0 20px 0;
34}
35.point1__steps__block .steps__host-check {
36  margin-top: 20px;
37}
38.point1__steps__block .steps__host-check a {
39  color: green;
40  text-decoration: none;
41}
42.point1__steps__block .steps__host-check a:hover {
43  text-decoration: underline;
44}