要素が中央寄せにならない

Question

要素が中央寄せにならない

現在Bootstrapでサイト模写をしていますが、目標物にあうBootstrapの種類がなかったため、CSSでその目標物を作っています。以下目標物です↓

模写したものです↓

青いコンテナーの中に、2つの要素が横並びになっています。
この2つを青のコンテナーに対して中央寄せしたいのですが上手くいきません。

該当のソースコード

＜HTML＞
 <div class="guide bg-success text-white mt-5 py-5">
    <div class="container">
      <h1 class="font-weight-bold pb-2">初心者ガイド</h1>
      <p class="pb-5">格安SIMや格安スマホ格安スマホの疑問に答えます。 </p>
    </div>
    <div class="box d-flex d-block mx-auto bg-primary">
      <div class="article bg-white mr-3">
        <h4 class="font-weight-bold text-dark pt-5 pl-4">初心者の方向けのおすすめ記事</h4>
      </div> 
      <div class="article bg-white">
        <h4 class="font-weight-bold text-dark pt-5 pl-4">初心者の方向けのおすすめ記事</h4>
      </div> 
    </div>
  </div>  

<CSS>
.article {
	width: 500px;
	height: 300px;
}

試したこと

親要素にtext-align:center、、子要素にdisplay: inline-blockしたりしましたが変化なしです。

Comments

[kai0310]

目標物があるのでしたら、目標物のコードを参照してみては？

また、該当する部分全てののコードを提示してもらえないでしょうか？

Answer 1

目標物はこちらでしょうか。
https://mobile.line.me/

Bootstrapは使ってなさそうに見えましたが、あえてBootstrapでやるなら
上部のコンテンツ（初心者ガイド等）に合わせるためにboxがついているdivにcontainerを追加、articleがついているdivにw-50を追加すれば似たような状態になるのかなと思います。
Bootstrapフレックスの説明-とほほのBootstrap 4入門

最低限以下の状態だけでcontainer内の50%ずつで表示できると思います。

<div class="d-flex container">
  <div class="w-50">
    <h4>初心者の方向けのおすすめ記事</h4>
  </div>
  <div class="w-50">
    <h4>初心者の方向けのおすすめ記事</h4>
  </div>
</div>

---

以下追記
レスポンシブにすることを考えるとこっちの方がいいかも？

<div class="d-md-flex container">
  <div class="flex-fill">
    <h4>初心者の方向けのおすすめ記事</h4>
  </div>
  <div class="flex-fill">
    <h4>初心者の方向けのおすすめ記事</h4>
  </div>
</div>

Comments

[mezale37]

回答ありがとうございます！
おかげで解決しました。勉強になりました。

Answer 2

フレックスボックスの中央寄せを行うには、margin: 0 auto;でもtext-align: centerでもなく、
親要素にjustify-content: centerを指定してやる必要があります。

.box.d-flex {
    justify-content: center;

こちらもご覧ください。
CSS Flexbox の基礎知識と使い方をやさしく解説