ブロック毎に横並びにしたい

現在air bnbの模写をしてるのですがHTML内のsubtopicクラスをこのサイトのように横並びにしたいのですがfloatもdisplay:flex;も効かずうまくできません。どうすればいいでしょうか？????

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" type="text/css" href="test.css">
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
9    <title>模写1</title>
10</head>
11<body>
12    <div class="container-fluid">
13        <div class="row justify-content-between">
14            <!--##############header##################-->
15            <div class="col">
16            <a href="#">
17            <img class="logo" src="https://seeklogo.com/images/A/airbnb-logo-1D03C48906-seeklogo.com.png" a href="#" height="30px" width="30px">
18            </a>
19            </div>
20        <div class="col-auto">
21            <ul class="row">
22            <li class="col month">予想月収</li>
23            <li class="col"><h4>¥151,550</h4></li>
24            <li class="button"><a href="#" class="b2">はじめる</a></li></ul>
25            </div>
26        </div>
27        <!--##############人数などの検索欄##################-->
28        <div class="box"> <div class="topic">
29            
30            <h1 class="col topic2">Airbnbホストになって、暮らしをレベルアップ</h1>
31            <p >どれくらいの収入が見込めるかチェック</p>
32            <input type="text" placeholder="ロケーション" name="location" class="locate">
33            <select id="rent" name="rent"  class="custom-select sources">
34                <option value="all">まるまる貸切</option>
35                <option value="only">個室</option>
36                <option value="share">シェアルーム</option>
37            </select>
38         
39            <select id="howmany" name="howmany" class="custom-select">
40                <option value="1">ゲスト1人</option>
41                <option value="1">ゲスト2人</option>
42                <option value="1">ゲスト3人</option>
43                <option value="1">ゲスト4人</option>
44                <option value="1">ゲスト5人</option>
45                <option value="1">ゲスト6人</option>
46                <option value="1">ゲスト7人</option>
47            </select>
48            <h1 class="m">¥80,289<span class="a">月あたり</span></h1>
49            <buttom type="buttom" class="btn btn-danger">はじめる</buttom>
50
51        </div></div>
52            <!--##############サブトピック##################-->
53        <div class="subtopic"> 
54            
55            <h3>Airbnbでホストするこれだけの理由</h3>
56            <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 
57                予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
58  
59                <h3>Airbnbならホストも安心安全</h3>
60            <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。
61                ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。
62
63                <a href="#">ホストを守るAirbnbの仕組みをチェック</a></p>
64                
65            <h3>ゲストは認証済みです</h3>
66            <p>Airbnbは全ゲストを対象に、予約の前に一定の情報（認証済み電話番号、メールアドレスなど）の提供を求めています。 
67                さらにご希望の場合は、ほかのホストからの推薦、認証済みIDの取得を追加要件として求めることもできます。</p>
68            
69        </div>
70
71
72    </div>
73
74</body>
75</html>

CSS
1<!--##############header##################-->
2.logo{margin:25px 30px 30px 5px;}
3ul{list-style: none;}
4li{ margin: 30px 0px;}
5.button{border: solid; 
6        color: white; 
7        background-color: orangered; 
8        border-radius: 8px;
9        margin-right: 70px;
10        padding: 6px 14px 6px 12px;}
11.b2:hover{text-decoration: none; color: white;}
12.b2{color: white; padding-left: 5px;}
13
14/****************************
15人数などの検索欄
16****************************/
17
18.box{background-image: url('main.jpeg'); 
19    border: solid white;
20    background-repeat: no-repeat; 
21    background-size: cover;
22    height: 600px;
23  
24}
25.month{margin-left: 110px;
26        margin-top: 35px;}
27.topic{float: right;
28    border: solid white;
29    background-color: white;
30    border-radius: 4px;
31    box-shadow:0 12px 40px  rgba(0, 0, 0, .12);
32    max-width: 460px;
33    margin: 78px 92px 0 0;
34    padding: 25px 20px;
35    }
36    
37.topic h1{font-size: 40px; 
38        line-height: 40px; 
39        letter-spacing: -0.6px;
40        }
41.topic input{width: 400px; 
42            height: 40px;
43                }
44#rent{width: 235px;
45    height: 40px;
46    margin-top: 10px;
47   }
48#howmany{height: 40px;
49        width: 150px;
50        margin-left: 10px;
51        margin-top: 10px;}
52.a{font-size: small;
53    font-weight: medium;
54    letter-spacing: 1px;
55margin-left: 5px;}
56.m{margin-top: 25px;}
57.topic p{margin-top: 25px;}
58.topic buttom{width: 400px;
59            height: 50px;
60            padding-top: 10px;}
61/****************************
62サブトピック
63****************************/
64.subtopic{max-width: 350px;
65    
66         }
67
68

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

回答1件

ベストアンサー

Bootstrapを使っていると思うので、.rowとcol-xxクラスを使うと横並びになります。

html
1<div class="subtopic">
2  <div class="row">
3    <div class="col-4">
4      <h3>Airbnbでホストするこれだけの理由</h3>
5      <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。
6        予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。
7      </p>
8    </div>
9
10    <div class="col-4">
11      <h3>Airbnbならホストも安心安全</h3>
12      <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。
13        ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。
14        <a href="#">ホストを守るAirbnbの仕組みをチェック</a>
15      </p>
16    </div>
17
18    <div class="col-4">
19      <h3>ゲストは認証済みです</h3>
20      <p>Airbnbは全ゲストを対象に、予約の前に一定の情報（認証済み電話番号、メールアドレスなど）の提供を求めています。
21        さらにご希望の場合は、ほかのホストからの推薦、認証済みIDの取得を追加要件として求めることもできます。
22      </p>
23    </div>
24  </div>
25</div>

css
1.subtopic {
2  max-width: 1200px; // ここの値はレイアウトにおうじて修正してください。
3  margin: 0 auto;
4}

投稿2020/02/17 07:14

総合スコア665

2020/02/17 10:26

参考になりましたありがとうございます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ブロック毎に横並びにしたい

関連した質問