Bootstrapでのボタンデザインのエラー

現在、Airbnbホスティング(https://www.airbnb.jp/host/homes)の模写を行なっています。

私の作成↓

navbar右の「はじめる」ボタンの右と背景画像の左に謎のボタンが出現し、お手本では右にあるはずの「Airbnbホストに~」のdivの塊が、左になっており、個々が赤ボタンになっています。

HTML
1コード
2<!doctype html>
3<html lang="ja">
4    <head>
5    <!-- Required meta tags -->
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8
9    <!-- Bootstrap CSS -->
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
11    <link rel="stylesheet" href="style_airbnb2.css">
12    <script src="https://kit.fontawesome.com/576bf3ee24.js" crossorigin="anonymous"></script>
13
14    <title>Airbnbでお家、アパート、お部屋をシェアしよう</title>
15    </head>    
16    <body>
17      <header>
18        <div class="container1 menubar">
19          <nav class="navbar navbar-expand-lg navbar-light fixed-top">
20            <a href="#" class="navbar-brand"><img src="airbnb/airbnb_icon.png"></a>
21              <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
22                <span class="navbar-toggler-icon"></span>
23              </button>
24            <div id="menu" class="collapse navbar-collapse">
25              <ul class="navbar-nav">
26                <li class="nav-item"><a href="#" class="nav-link">概要</a></li>
27                <li class="nav-item"><a href="#" class="nav-link">準備</a></li>
28                <li class="nav-item"><a href="#" class="nav-link">安全</a></li>
29                <li class="nav-item"><a href="#" class="nav-link">マネープラン</a></li>
30              </ul>
31            </div>
32            <ul class="navbar-nav navbar-light d-none d-lg-flex">
33              <li class="nav-item">予想月収<a href="#"><i class="fa fa-question-circle-o" aria-hidden="true"></i></a></li>
34              <li class="nav-item"><span id="fee">&yen;191,966</span></li>
35              <li class="nav-item"><a href="#" class="btn btn-danger">はじめる</li>
36            </ul>
37          </nav>
38        </div>
39        <div class="container2" id="air">
40          <div class="row">
41
42            <form class="col-md-4 col-xs-12">
43
44              <div class="h1">Airbnbホストになって、暮らしをレベルアップ</div>
45              <div class="form-group input">
46                <label for="Input">どれくらいの収入が見込めるかチェック</label>
47                <input type="text" class="form-control" placeholder="東京">
48              </div>
49
50              <div class="select">
51                <div class="form-group" id="select1">
52                  <select class="form-control">
53                    <option selected>まるまる貸切</option>
54                    <option>個室</option>
55                    <option>シェアルーム</option>
56                  </select>
57                </div>
58
59                <div class="form-group" id="select2">
60                    <select class="form-control">
61                      <option>ゲスト1人</option>
62                      <option>ゲスト2人</option>
63                      <option>ゲスト3人</option>
64                      <option selected>ゲスト4人</option>
65                      <option>ゲスト5人</option>
66                      <option>ゲスト6人</option>
67                      <option>ゲスト7人</option>
68                      <option>ゲスト8人</option>
69                      <option>ゲスト9人</option>
70                      <option>ゲスト10人</option>
71                      <option>ゲスト11人</option>
72                      <option>ゲスト12人</option>
73                      <option>ゲスト13人</option>
74                      <option>ゲスト14人</option>
75                      <option>ゲスト15人</option>
76                      <option>ゲスト16人</option>
77                    </select>
78                  </div>
79                </div>
80
81                <div class="fee">
82                  <p class="fee-h1">
83                    &yen;191,966
84                  </p>
85                  <p class="fee-child">月あたり<a href="#"><i class="fa fa-question-circle-o" aria-hidden="true"></i></a></p>
86                </div>
87
88                <a href="#" class="btn btn-danger mx-auto d-block">はじめる</a>
89            </form>
90          </div>
91        </div>
92      </header>
93</html>

CSS
1コード
2#air{
3    background-image:url(./airbnb/Airbnb2.jpg);
4    background-repeat:no-repeat;
5    background-size:100% auto;
6    background-position:center 90px;
7    background-attachment: fixed;
8    max-width: 100%;
9    padding-bottom: 70px;
10    margin-top: 72px;
11}
12
13.navbar{
14    padding:10px 80px 0;
15}
16
17nav{
18    background-color: white;
19    line-height: 56px;
20}
21
22.nav-item{
23    margin:0 10px;
24}
25
26.nav-link:hover{
27    text-decoration: underline;
28}
29
30.fa-question-circle-o{
31    text-decoration: none;
32    color:gray;
33}
34
35#fee{
36    font-weight:bold;
37    font-size:1.5rem;
38}
39
40.h1{
41    font-weight:bold;
42    margin-bottom: 16px;
43}
44
45form{
46    background-color: white;
47    margin: 30px;
48    padding: 20px;
49    border-radius: 5px;
50    margin-right: 90px;
51    margin-top: 80px;
52}
53
54.form-control{
55    height:3rem;
56}
57
58.col-md-4{
59    padding: 30px 40px;
60}
61
62header.row{
63    flex-direction: row-reverse;
64}
65
66.select{
67    display: flex;
68}
69
70#select1{
71    width:60%;
72    margin-right: 10px;
73}
74
75#select2{
76    width:40%;
77}
78
79.input{
80    margin-top: 10px;
81    margin-bottom: 10px;
82}
83
84form.btn{
85    margin-bottom: 16px;
86    padding: 12px;
87}
88
89.fee{
90    display: flex;
91}
92
93.fee-child{
94    line-height: 64px;
95    margin: 0;
96}
97
98.fee-h1{
99    font-weight: bold;
100    margin-bottom: 16px;
101    font-size: 2.5rem;
102}
103
104@media screen and (max-width: 544px){
105
106    form{
107        background-color: transparent;
108        margin: 100px 0 0;
109        padding: 20px;
110        border-radius: 5px;
111    }
112
113    #air{
114        background-attachment: fixed;
115        margin-top: 0;
116    }
117
118    .h1{
119        margin-top: 120px;
120        color:white;
121        width: 100%;
122        font-size: 2.0rem;
123    }
124
125    header.row{
126        flex-direction: row;
127    }
128
129    .select{
130        display: block;
131    }
132
133    #select1{
134        width: 100%;
135        margin-right: 0;
136    }
137
138    #select2{
139        width: 100%;
140    }
141
142    .fee-child{
143        line-height: 64px;
144        margin: 0px;
145    }
146}

・試したこと
CSS反映のテスト1回目は、btnのスペルが間違っていたため反映されなかったのですが、btnを書くと、こうなりました。なので、btnを消してみましたが変わりありませんでした。
divやcontainerに入れる要素の間違いでしょうか？
以上、ヘッダー内のボタンデザインの疑問について、回答よろしくお願いいたします。

・補足情報
Bootstrap4.3.1
VSCode
ブラウザ：Chorme
OS：Widows10
AirbnbホスティングWebサイト(https://www.airbnb.jp/host/homes)

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

回答1件

ベストアンサー

ナビゲーションの中の、下記の部分にaの閉じタグが足りないようです。

HTML
1<li class="nav-item"><a href="#" class="btn btn-danger">はじめる</li>

投稿2019/11/02 12:48

AsukaKobayashi

総合スコア296

sanyagi_d_1

2019/11/02 13:29

お、、これはダサいですね、、 row-reverse反映されてないのも半角スペース入れてないためでした。。回答ありがとうございます

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

Bootstrapでのボタンデザインのエラー

関連した質問