線がかぶさってしまいます。

iSaraは「実質0円」！さらなる特典もありますというところで
上の画像のようにしたいのですが、下のようになってしまいます。
どうしたら線をかぶさらないようにできますか。

html
1<h3 id="main_eleven_black">iSaraは『実質０円』！さらなる特典もあります。</h3>
2            <div id="main_eleven_three">
3                <div class="main_eleven_main">
4                    <p class="main_eleven_white">特典１</p>
5                    <p>講座費用258,000円以上の金額が稼げるまで、「永久サポート延長」。リスク０で参加できます。</p>
6                </div>
7                <div class="main_eleven_main">
8                    <p class="main_eleven_white">特典２</p>
9                    <p>iSaraフリーランスコミュニティ参加権利。案件の紹介や、新施設OPENの際の優先利用権が受けられます。</p>
10                </div>
11                <div class="main_eleven_main">
12                    <p class="main_eleven_white">特典３</p>
13                    <p>講座参加後のシェアハウス利用権利（ドンムアン空港至近のため、とても便利です）</p>
14                </div>
15            </div>

scss
1.main_eleven{
2  background-color: #ebb94d;
3  color: black;
4  letter-spacing: 2px;
5  padding-bottom: 40px;
6  h3{
7    margin-top: 0;
8    font-size: 26px;
9    padding: 20px;
10    padding-top: 50px;
11  }
12  p{
13    font-weight: bold;
14    span{
15      color: white;
16    }
17  }
18  #main_eleven_three{
19    display: flex;
20    justify-content: center;
21    max-width: 1170px;
22    height: 361px;
23    border: 2px solid white;
24    margin: 0 auto;
25    .main_eleven_main{
26      background-color: white;
27      width: 250px;
28      height: 250px;
29      border-radius: 50%;
30      margin: 50px 56px;
31      p{
32        margin: 20px auto;
33        width: 220px;
34        font-size: 14px;
35      }
36  .main_eleven_white{
37    color: #ebb94d;
38    font-size: 22px;
39    margin-top: 50px;
40    font-weight: normal;
41  }
42}
43}
44#main_eleven_black{
45  background-color: #ebb94d;
46  margin-bottom: -40px;
47}
48}