display flexが効かない

下の写真の黒枠で囲った部分にdisplay flexを指定したのですが横並びになりません。画像を左に、文章部分を右に配置したいです。子要素はそれぞれdiv化してあります。

html
1<div class="news">
2
3      <div class="pro">
4        <div class="left">
5        <h2>NEWS</h2>
6        
7        <div class="wave"><img class="wave" src="./css/image/wave.png" alt="ウェーブ"></div></div>
8        <a href="#" class="btn btn-lg btn-info">more  ></a>
9        </div>
10
11        <div class="container">
12
13          <div class="row">
14            <div>
15              <img class="col-lg-5" src="./css/image/アンケートアイキャッチ.jpg" alt="アンケートアイキャッチ"></div>
16            <div class="newspicinfo col-lg-7">
17              <h5>新書籍「僕が旅人になった日」のアンケートにご協力ください！</h5><p><small>2019.9.15</small><br>いつの間にか夜は肌寒くなってきて、もう夏も終わったんだな〜と実感しております。こんにちは、TABIPPOのROY（roy_world81）です。
18                7月まで「#旅とわたし」というテーマでみなさまの旅のエッセイを募集していました。（詳しくはこちら）
19                約4,300件の応募の中から掲載者が確定し、順調に書籍の制作に向けて動いております。ご投稿していただいたみなさま、改めてありがとうございます。
20                そんな旅人みんなで作る書籍「僕が旅人になった日」はエッセイだけではなく、未来の旅人が旅に出たくなるようなコンテン…</p></div>
21          </div>
22        </div>
23    </div>

htmlでrowの部分が黒枠になります。

css
1.news {
2  background-color: #f6f6f6;
3  padding-top: 100px;
4  height: 2000px;
5}
6.news .pro {
7  display: flex;
8  justify-content: space-between;
9  margin-left: 10%;
10  margin-right: 10%;
11  margin-bottom: 80px;
12}
13
14.news .wave {
15  width: 70px;
16}
17.news .left h2 {
18  font-family: "Gill Sans Std Book", sans-serif;
19
20}
21
22.news .more img {
23  width: 15px;
24  height: 11px;
25  padding-left: 4px;
26}
27.news .more {
28  display: flex;
29  width: 200px;
30  border: 1px solid black;
31  align-items: center;
32  justify-content: center;
33  padding: 0px 50px;
34}
35.news .row {
36  display: flex;
37  border: 1px solid black;
38  height: 400px;
39  width: 1000px;
40
41}
42.news .newspicinfo small {
43  display: inline-block;
44  margin-bottom: 20px;
45}
46.news .newspicinfo p {
47  color: #656c6e;
48  font-size: 14px;
49
50}

cssは.news .rowの文章から問題の部分になります。
分かる方いらっしゃいましたらよろしくお願い致します。

hatena19

2020/02/27 05:15

クラス名が Bootstrap っぽいですが、Bootstrap を使用してますか？

momoka-

2020/02/27 05:17

一応bootstrapは4.4.1を使ってます！

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

回答1件

Bootstrapを使っているなら、レイアウトはBootstrapのクラス設定でするようにしましょう。
独自にCSSでレイアウトすると、Bootstrapの設定と競合して、想定通りにするのは難しくなります。

クラスに row を設定するとdisplay: flex;になりますので、CSSのdisplay: flex;は不要ですので削除しましょう。
あと、width height を固定値(px)で設定してますが、これも削除しましょう。これをするとbootstrapの設定が無視されますし、レスポンシブにはなりません。

そのうえで、Bootstrap のグリッドレイアウトについして調べて、希望のレイアウトになるようにクラス設定してください。

投稿2020/02/27 05:31

hatena19

総合スコア33715