flexを使用して二つの要素を左右に並べたいです。

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
display: flex を使用して二つの要素を左右に並べたいです。
添付画像の右側のように反映させたいのですが、、flexが反映されずに縦に並んだままになります。(左側)

原因が分かる方教えてください。

該当のソースコード

■HTML

<section class="concept"> <div class="wrapper"> <article class="concept-left"> <h2>なぜAirbnbでホスト?</h2> <p> どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアして、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流頻度まで、すべて自分で決めることができます。 </p> </article> <article class="concept-right"> <h2>困ったときも安心</h2> <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p> </article> </div> </section>

■CSS
.concept {
height: 900px;
margin: 30px auto;
display: -webkit-flex;
display: flex;
}
.wrapper {
width: 1140px;
margin: 0 auto;
}
.concept article.concept-left {
width: 50%;
}

.concept article.concept-right {
width: 50%;
}

.concept h2 {
font-size: 25px;
margin-bottom: 30px;
}

.concept p {
width: 510px;
line-height: 1.8;
}

Answer 1

<section class="concept"></section>にdisplay: flex;を適用されてますが、その直下には<div class="wrapper"></div>の要素一つだけだから、縦に並べるも横に並べるもないのでは？
<div class="wrapper"></div>にdisplay: flex;すると、その子要素である<article class="concept-left"></article>と<article class="concept-right"></article>が横に並ぶと思いますよ。

Comments

[sasayaka_p]

とてもわかりやすい回答ありがとうございます。
理解でき、無事解決することができました。
ありがとうございます