Bootstrap での会社概要情報の一覧表示がうまくいかない

Question

Bootstrap4を利用して会社概要の部分を下記のように作成しようとしています。
うまくレイアウトがいかず、困っています。
中央余せで一覧表示しようとしていますが崩れます。
どのようにすればよいでしょうか？

    <section class="container u-content-space u-bg-arrow-wrapper">
      <div class="text-center u-bg-arrow-bottom">
        <div class="row">
          <div class="col-md-5 col-md-offset-1 mb-4">
            <div class="col-md-2 text-left">会社名</div>
            <div class="col-md-10 text-left"><strong>株式会社テストテスト</strong></div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-5 col-md-offset-1 mb-4">
            <div class="col-md-2 text-left">代表取締役</div>
            <div class="col-md-10 text-left"><strong>山田　太郎</strong></div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-5 col-md-offset-1 mb-4">
            <div class="col-md-2 text-left">電話番号</div>
            <div class="col-md-10 text-left"><strong>0XX-XX-XXXX<br />担当直通：090-XXXX-XXXX</strong></div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-5 col-md-offset-1 mb-4">
            <div class="col-md-2 text-left">FAX番号</div>
            <div class="col-md-10 text-left"><strong>0XXXX-XX-XXXX</strong></div>
          </div>
        </div>
      </div>
    </section>

追記
間違えました。

Comments

[x_x]

どのように表示させたいかを図示してみてはいかがでしょうか？

Answer 1

divタグを調整してうまくいきました