同じコードにしたのに同じように表示されない

html,css,bootstrapでサイトの模写をしているのですが、ページの上の方に書いたコードのテキスト分は狙ったように動作するのですが、下に書いたコードのテキストは上のページのようにうまく表示されません。なぜでしょうか。コード載せるので解説お願いします。

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
   <title>Bootstrapの練習</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">  
   <link rel="stylesheet" href="css/bootstrap.css">
   <link rel="stylesheet" href="css/Bootstrapの練習.css">
   <script type="text/javascript" src="js/jquery-3.5.0.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.js"></script>
  </head>
<body>
<h1></h1>
  <button type="button" class="btn btn-default">概要</button>
  <button type="button" class="btn btn-default">準備</button>
  <button type="button" class="btn btn-default">安全</button>
  <button type="button" class="btn btn-default">マネープラン</button>
  <div class="text-right pr-5">
    <button type="submit" class="btn btn-danger">はじめる</button>
    </div>
    <div class="background-image">

      <div class="row justify-content-end">
        <div class="border col-5">
          <br>
          <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ</h1>
          <h2 class="size1"><b>宿泊施設の内容を記入</b></h2>
          <br>
          <div class="row clear_form">
            <div class="col-md">
              <form>
                <div class="form-group">
                  <input type="text" class="form-control">
                  <div class="d-flex">
                    <select class="form-control w-50">
                      <option>まるまる貸切</option>
                      <option>個室</option>
                      <option>シェアルーム</option>
                    </select>
                  <select class="form-control w-50">
                      <option>ゲスト1人</option>
                      <option>ゲスト2人</option>
                      <option>ゲスト3人</option>
                      <option>ゲスト4人</option>
                      <option>ゲスト5人</option>
                      <option>ゲスト6人</option>
                      <option>ゲスト7人</option>
                      <option>ゲスト8人</option>
                      <option>ゲスト9人</option>
                      <option>ゲスト10人</option>
                      <option>ゲスト11人</option>
                      <option>ゲスト12人</option>
                      <option>ゲスト13人</option>
                      <option>ゲスト14人</option>
                      <option>ゲスト15人</option>
                      <option>ゲスト16人</option>
                  </select> 
                </div> 
                 <button type="submit" class="btn btn-danger ">はじめる</button>  
              </form>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  
<div class="flex1_div">
    <div class="first_div">
      <h2  style="text-align:center" class="size2" ><b>Airbnbでホストするこれだけの理由</b></h2>
      <p style="text-align:center">どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
    </div>
    <div class="second_div">
      <h2 style="text-align:center" class="size3"><b>困った時も安心</b></h2>
      <p style="text-align:center">万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
    </div>
</div>


<h2   style="text-align:center"  class="px"><b>3ステップでホスティング</b></h2>
<div class="flex1_div">
  <div class="third_div">
    <h3><b>無料でお部屋を掲載</b></h3>
    <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p>
  </div>
  <div class="f4_div">
    <h3><b>ホスティング方法を設定</b></h3>
    <p>スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。
    </p>
  </div>
  <div class="f5_div">
    <h3><b>はじめてのゲストが来ます！</b></h3>
    <p>リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</p>
    <button type="button" class="btn btn-link mt-1">ホストを始める方法をチェック</button>
  </div>
</div>
<div><p class="px3">“</p>
    <h2 style="text-align:left" class="px1" >
    「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</h2>
  <p style="text-align:left" class="px1">Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p>  
  <button type="submit" class="btn btn-outline-dark px1" >ホスト実践例をチェック</button>
</div>
<div class="background-image1">
</div>
<h2 style="text-align: center"class="px"><b>万一の時も安心です</b></h2>
<div class="flex_div">
  <div class="f6_div">
   
    <p class="px4">大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。 その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。 万一のトラブルのときには、Airbnbが全力でサポートします。 建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p>
    <button type="button" class="btn btn-link mt-1 px2">ホストを守るAirbnbの仕組みをチェック</button>
  </div>
  <div class="f7_div">
    <ul> 
      <li>予約前に政府発行の身分証明書を求める権限</li>
      <li>ハウスルールに同意しないと泊まれない</li>
      <li>過去の宿泊のレビューもばっちり読める</li>
      <li>財物損害は¥100,000,000まで無料で補償</li>
      <li>$1,000,000の賠償責任保険が無料で付帯</li>
      <li>24時間365日対応グローバルカスタマーサポート</li>

    </ul>


  </div>
  

</div>
    

</div>
<div class="background-image2">
</div>
<h2   style="text-align:center"  class="px"><b>シンプルな決済</b></h2>
<div class="flex1_div">
  <div class="third_div">
    <h3><b>料金設定は完全に自由</b></h3>
    <p>料金は常に自由に選択できます。 迷ったときには、 域内需要に合わせて設定できるツールがあります。</p>
  </div>
  <div class="f4_div">
    <h3><b>手数料が安い</b></h3>
    <p>登録に費用は一切かかりません。Airbnbは通常、予約ごとに業界で最低の均一3％をサービス料としていただいております。
    </p>
  </div>
  <div class="f5_div">
    <h3><b>迅速な支払い</b></h3>
    <p>ゲストのチェックイン後に、Paypal、直接振り込み、またはその他の利用可能な方法で受取金を送金できます。</p>
    <button type="button" class="btn btn-link mt-1">Airbnb収入を得るまでの流れを見る</button>
    <div><p class="px3">“</p>
      <h2 style="text-align:left" class="px1" >
        ホスト収入でキッチンリフォーム。お家をいろいろアップグレードしました。</h2>
    <p style="text-align:left" class="px1">Tessaさんはロンドン在住。ホストになって経済的なゆとりができました</p>  
    <button type="submit" class="btn btn-outline-dark px1" >ホスト実践例をチェック</button>
  </div>
</body>
</html>

.px {
  font-size: 320%;
  padding-top: 8%;
  padding-bottom: 5%;
}
.size1{
  font-size: 100%;
}
.size2{
  font-size: 170%;
  
}
.size3{
  font-size: 170%;
}
.background-image{
  background-image: url(../airbnb.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-bottom:33%
}
.flex1_div {
  display: flex;
  justify-content: center;
}
.first_div {
  display: inline-block;
  width: 24%;
  padding:0.3%;
  margin: 0 10px 0 0;
  }
  .second_div {
    display: inline-block;
    width: 24%;
    padding:0.3%;
    margin: 0 10px 0 0;
    }
    .third_div{
      display: inline-block;
      width: 16%;
      padding:0.3%;
      margin: 0 10px 0 0;
    }
    .f4_div{
      display: inline-block;
      width: 16%;
      padding:0.3%;
      margin: 0 10px 0 0;
    }
    .f5_div{
      display: inline-block;
      width: 16%;
      padding:0.3%;
      margin: 0 10px 0 0;
    }
    .px1{
      width: 32%;
      padding-left: 10%;
    }
    .px2{
      padding-left: 10%;
    }
    .background-image1{
      background-image:url(../airbnb3.png);
      height:100%;
    }
    .form-control{
      text-align: left
    }
    .form-group{
      width: 100%;
    }
    .clear_form:after{
      content: "";
      display: block;
      clear: both;
    }
    .px3{
      font-size: 500%;
      color:orange;
      padding-left: 10%;
    }
    ul {
      background: white;
      padding: 0 0.5em;
      position: relative;
    }
    
    ul li {
      line-height: 1.5;
      padding: 0.5em 0 0.5em 1.5em;
      border-bottom: 2px solid white;
      list-style-type: none!important;
    }
    
    ul li:before {
      font-family: "Font Awesome 5 Free";
      content: "\f00c";/*アイコン種類*/
      position: absolute;
      left : 1.0em; /*左端からのアイコンまで*/
      color: #668ad8; /*アイコン色*/
    }
    
    ul li:last-of-type {
      border-bottom: none;/*最後の線だけ消す*/
    }
  
    .f6_div{
     /* display: inline-block;*/
      width: 45%;
      padding:0.3%;
      margin: 0 10px 0 0;
    }
    .f7_div{
      /*display: inline-block;*/
      width: 45%;
      padding:0.3%;
      margin: 0 10px 0 0;
    }
    /*.px4{
      width: 34%;
      padding-left: 10%;
    }*/

    h2.px{
      text-align: center;
    }
    .flex_div{
      max-width: 1000px;
      margin: 0 auto;
      display: flex;
      justify-content: space-evenly;
    }
    .background-image2{
      background-image:url(../airbnb6.png);
    }

狙ったテキストの形

形が崩れた下のテキスト

追記：こんな感じでしょうか。

  <div class="f-container"><p class="px3">“</p>
      <h2 style="text-align:left" class="px1" >
        ホスト収入でキッチンリフォーム。お家をいろいろアップグレードしました。</h2>
    <p style="text-align:left" class="px1">Tessaさんはロンドン在住。ホストになって経済的なゆとりができました</p>  
    <button type="submit" class="btn btn-outline-dark px1" >ホスト実践例をチェック</button></div>




コード

 .f-container{
      justify-content: flex-end;
    }



コード

m.ts10806

2020/05/05 21:14

「コード」というのも入ってるんですか？ファイル名も全角ですか？

writegrint

2020/05/05 21:37

ファイル名は半角です。「コード」の部分は消しました。

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

回答1件

ベストアンサー

開始タグ<div>と終了タグ</div>の対応ができてません。
まずは、これを正しい対応になるように修正してください。

閉じタグが適切な位置にないとブラウザが適切と判断した位置に自動挿入されます。そのため、親子関係が想定のものにならなくなるのが原因です。

画像の幅が狭くなっている要素は、前の3分割カラムの子要素になってしまってますのでそのような表示になってます。

コメントを受けて

模写先のページを見ると、画像の右にテキストを配置したいのだと推測しましたので、その前提でコーディングしてみました。

html
1<div class="f-container">
2    <div>
3        <img src="https://placehold.jp/400x400.png">
4    </div>
5    <div>
6        <p class="px3">“</p>
7        <h2 style="text-align:left" class="px1">ホスト収入でキッチンリフォーム。お家をいろいろアップグレードしました。</h2>
8        <p style="text-align:left" class="px1">Tessaさんはロンドン在住。ホストになって経済的なゆとりができました</p>
9        <button type="submit" class="btn btn-outline-dark px1">ホスト実践例をチェック</button>
10    </div>
11</div>

css
1.f-container{
2  display: flex;
3  justify-content: space-between;
4  max-width: 900px;
5  margin: 0 auto;
6 }
7
8.f-container div {
9  width: 49%;
10}
11
12.f-container div img {
13  width: 100%;
14}