テキストを中央に二列持っていきたい

HTMLとCSSでサイトの模写をしていて、テキストを２列中央に持っていきたいのですが、text-align:center;にしても中央に寄ってくれません。コードと写真載せるのでやり方教えて頂きたいです。

HTML
<h2 style="text-align: center"class="px"><b>万一の時も安心です</b></h2>
<div class="flex_div">
  <div class="f6_div">
   
    <p style="text-align:center" class="px4">大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。 その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。 万一のトラブルのときには、Airbnbが全力でサポートします。 建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p>
    <button type="button" class="btn btn-link mt-1 px2">ホストを守るAirbnbの仕組みをチェック</button>
  </div>
  <div class="f7_div">
    <ul> 
      <li style="text-align: center;">予約前に政府発行の身分証明書を求める権限</li>
      <li>ハウスルールに同意しないと泊まれない</li>
      <li>過去の宿泊のレビューもばっちり読める</li>
      <li>財物損害は¥100,000,000まで無料で補償</li>
      <li>$1,000,000の賠償責任保険が無料で付帯</li>
      <li>24時間365日対応グローバルカスタマーサポート</li>

    </ul>


  </div>
  

</div>
    

</div>

コード

CSS
 ul {
      border: solid 2px #ffb03f;
      padding: 0.5em 1em 0.5em 2.3em;
      position: relative;
    }
    
    ul li {
      width: 150%;
      line-height: 1.5;
      padding: 0.5em 0;
      list-style-type: none!important;/*ポチ消す*/
    }
    
    ul li:before {
      font-family: "Font Awesome 5 Free";
      content: "\f00c";
      position: absolute;
      left : 1em; /*左端からのアイコンまで*/
      color: #ffb03f; /*アイコン色*/
    }
    .f6_div{
      display: inline-block;
      width: 230%;
      padding:0.3%;
      margin: 0 10px 0 0;
    }
    .f7_div{
      display: inline-block;
      width: 16%;
      padding:0.3%;
      margin: 0 10px 0 0;
    }
    .px4{
      width: 34%;
      padding-left: 10%;
    }

ここに言語を入力
コード

これを

こうしたいです

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

回答1件

ベストアンサー

まず、HTMLに埋め込んでいるインラインスタイル（style="text-align: center"）は削除します。スタイルはCSSでの設定に統一したほうか管理しやすいです。

CSSは下記に修正してください。

css
1ul {
2  border: solid 2px #ffb03f;
3  padding: 0.5em 1em 0.5em 2.3em;
4  position: relative;
5}
6
7ul li {
8/*  width: 150%; */
9  line-height: 1.5;
10  padding: 0.5em 0;
11  list-style-type: none!important;/*ポチ消す*/
12}
13
14ul li:before {
15  font-family: "Font Awesome 5 Free";
16  content: "\f00c";
17  position: absolute;
18  left : 1em; /*左端からのアイコンまで*/
19  color: #ffb03f; /*アイコン色*/
20}
21.f6_div{
22/*  display: inline-block; */
23  width: 45%; /*修正*/
24  padding:0.3%;
25  margin: 0 10px 0 0;
26}
27.f7_div{
28/*  display: inline-block;*/
29  width: 45%; /*修正*/
30  padding:0.3%;
31  margin: 0 10px 0 0;
32}
33/* .px4{
34 width: 34%;
35padding-left: 10%;
36} */
37
38/*以下追加*/
39h2.px {
40  text-align: center;
41}
42
43.flex_div {
44  max-width: 1000px;
45  margin: 0 auto;
46  display: flex;
47  justify-content: space-between
48}