子要素を囲む入れ物（親要素）を子要素の大きさに合わせ、小さくしたい。

いつもお世話になっております。

Airbnbの模写コーディング練習をしています。

レスポンシブ対応をさせた時、PC表示でメインイメージの中に表示される
フォームエリアを作っている最中です。

今、この様な感じで、悩み、作業が止まってしまいました。

.formを囲っている.form-wrapperのwidthは100%に指定しており、
中身の大きさに合わせて変わるかと思いきや、
思う様に行きませんでした。

このまま、中身のコンテンツ幅に合わせて形を整えたいと思っているのですが、、、

よろしくお願いします。

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  <link rel="stylesheet" href="css/style.css">
7  <link rel="stylesheet" href="css/media.css">
8
9  <title>Document</title>
10</head>
11<body>
12  <header>
13   <section class="header-wrapper">
14    <ul>
15      <li><img src="img/airblogo.png"></li>
16      <li><a href="#">概要</a></li>
17      <li><a href="#">準備</a></li>
18      <li><a href="#">安全</a></li>
19      <li><a href="#">マネープラン</a></li>
20    </ul>
21    <div class="btn">はじめる</div>
22   </section>
23  </header>
24
25  <section class="main-visual-wrapper">
26    <div class="visual-content">
27
28
29      <section class="form-wrapper2">
30        <div class="form">
31          <h2 class="form-in">Airbnbホストになって、暮らしをレベルアップ</h2>
32          <h2>宿泊施設の内容を記入</h2>
33          <input type="text" value="東京">
34      
35          <select class="room">
36            <option>まるまる貸切</option>
37            <option>個室</option>
38            <option>シェアルーム</option>
39          </select>
40      
41          <select class="gest">
42            <option>ゲスト1人</option>
43            <option>ゲスト2人</option>
44            <option>ゲスト3人</option>
45            <option>ゲスト4人</option>
46          </select>
47          <a href="#" class="btn">はじめる</a>
48        </div>
49      </section>
50
51    <h1>Airbnbホストになって、暮らしをレベルアップ</h1>
52    </div>
53  </section>
54  
55<section class="form-wrapper">
56  <div class="form">
57    <h2>宿泊施設の内容を記入</h2>
58    <input type="text" value="東京">
59
60    <select class="room">
61      <option>まるまる貸切</option>
62      <option>個室</option>
63      <option>シェアルーム</option>
64    </select>
65
66    <select class="gest">
67      <option>ゲスト1人</option>
68      <option>ゲスト2人</option>
69      <option>ゲスト3人</option>
70      <option>ゲスト4人</option>
71    </select>
72    <a href="#" class="btn">はじめる</a>
73  </div>
74</section>
75
76
77
78  <section class="text-content">
79    <div class="text-wrapper">
80      <div class="text1">
81        <h2>なぜAirbnbでホスト?</h2>
82        <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアして、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流頻度まで、すべて自分で決めることができます。</p>
83      </div>
84
85      <div class="text2">
86        <h2>困ったときも安心</h2>
87        <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
88      </div>
89    </div>
90  </section>
91
92
93</body>
94</html>

CSS
1
2h1,
3h2,
4h3,
5p{
6  color:#484848;
7}
8
9body,
10header{
11  width:100%;
12  margin:0;
13}
14
15a{
16  text-decoration: none;
17}
18
19li{
20  list-style: none;
21}
22
23/* ヘッダー */
24
25header{
26  display: none;
27}
28
29.header-wrapper ul li img{
30  width:30px
31}
32
33.header-wrapper{
34  display:flex;
35  justify-content: space-between;
36  height: 80px;
37  align-items: center;
38}
39
40.header-wrapper ul{
41  display:flex;
42  
43}
44
45.header-wrapper ul li{
46  margin: 0 20px;
47}
48
49.header-wrapper .btn{
50  line-height: 40px;
51  padding: 0 10px;
52  margin-right: 10px;
53  text-align: center;
54  background:#DB3742;
55  color: white;
56  font-weight: bold;
57  border-radius: 4px;
58  /* align-self: center; */
59}
60
61/* メインビジュアル */
62
63.main-visual-wrapper h1{
64  color:white;
65  font-size:30px;
66  position:absolute;
67  bottom:0;
68}
69
70.main-visual-wrapper{
71  height: 300px;
72  background-image: url("../img/header.jpg");
73  background-size: cover;
74  position:relative;
75}
76
77.visual-content{
78  width: 70%;
79  height:100%;
80  margin: 0 auto;
81  text-align: bottom;
82}
83
84.visual-content::before{
85  content: '';
86  display: inline-block;
87  width:50px;
88  height: 50px;
89  background-image: url(../img/airblogo.png);
90  background-size: contain;
91  position: absolute;
92  top:0;
93  left:0;
94}
95
96/* メインビジュアルフォーム */
97
98.form-wrapper2 .form-in{
99  font-size: 40px;
100}
101
102.form-wrapper2{
103  margin:0;
104  width:100%;
105}
106
107.form-wrapper2 .form{
108  width:50%;
109}
110
111/* インプットセクション */
112
113.form h2,
114.form input,
115.form .btn{
116  display: block;
117}
118
119.form-wrapper,
120.form-wrapper2{
121  width: 90%;
122  margin: 0 auto;
123  background: white;
124}
125
126.form{
127  padding:40px;
128}
129
130
131.form h2{
132  font-size:18px;
133}
134
135.form .btn{
136  width:100%;
137  line-height: 60px;
138  text-align: center;
139  background:#DB3742;
140  color: white;
141  font-weight: bold;
142  border-radius: 4px;
143}
144
145.form input{
146  line-height: 50px;
147  border-radius: 4px;
148  border: 1px #DCE0E0 solid;
149  width: 100%;
150  margin-bottom:5px;
151  font-size:20px;
152  color:gray;
153}
154
155.form .room,
156.form .gest{
157  border: 1px #DCE0E0 solid;
158  padding:12px;
159  background: white;
160  margin-bottom:30px;
161  font-size:20px;
162  color:gray;
163}
164
165
166.form .room{
167  width:60%;
168}
169
170.form .gest{
171  float: right;
172  width:38%;
173}
174
175select{
176  -webkit-appearance: none;
177  -moz-appearance: none;
178  appearance: none;
179  }
180  select::-ms-expand{
181  display: none;
182  }
183
184  /* テキストセクション */
185
186  .text-wrapper{
187    width:60%;
188    padding-top: 40px;
189    margin:0 auto;
190  }
191
192/* メディアクエリ */
193
194@media only screen and (min-width: 1200px) {
195
196header{
197  display: block;
198}
199
200.visual-content::before{
201  display:none;
202}
203
204.form-wrapper{
205  display: none;
206}
207
208.main-visual-wrapper{
209  height:600px;
210}
211
212
213}
214