Padding解除やレイアウトが上手くいかない

以下のコードで配置が上手くいかなくて詰まっています。
何が問題なのか理由を教えていただけないでしょうか？よろしくお願いいたします。

１．「旅を贈ろう」を含む、.middleの垂直位置をメイン写真の中ほどにしたいが、paddingやmarginを入れても張り付いたように動かない。
２．レスポンシブ時に「旅を贈ろう」の位置を左寄せしたいが、左にpaddingが入っていて解除も出来ないため、動かすことが出来ない。
３．レスポンシブ時にヘッダー部分のレイアウトが崩れてしまう。inputの長さを指定しても長さが変わらない。

※このサイトを参考に作っています。https://www.airbnb.jp/gift

HTML
1コード
2<!DOCTYPE html>
3<html>
4  <head>
5  	<meta charset="utf-8";>
6    <title>Airbnbcopy</title>
7     <link href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" rel="stylesheet">
8     <!-- Required meta tags -->
9    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
10
11    <!-- Bootstrap CSS -->
12    <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">
13	<link rel="stylesheet" href="css/index.css" />
14  
15  </head>
16
17 <body>
18  <header>
19  	<div class="header-container">
20  		<div class="menu-box">
21  			<div class="logo"><i class="fab fa-airbnb "></i></div>
22  			<input class="search" type="search" name="search" placeholder="　????  探す">
23  		</div>
24        
25        <nav>
26	  		<ul>
27	         　 <li><a href="#">ホストをはじめる</a></li>
28	            <li><a href="#">ヘルプ</a></li>
29		 		<li><a href="#">登録する</a></li>
30		 		<li><a href="#">ログイン</a></li>
31	  		</ul>
32  	　　</nav>
33  	</div>
34  </header>
35  
36  <main>
37  	<div><!-- nth-child(1) -->
38			<section id="message">
39				<h2><i class="fab fa-speakap fa-2x"></i>今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。<button class="close" aria-hidden="true" type="button" data-dismiss="alert">×</button></h2><!--<h2>～<h6>のヘッディングコンテンツを使う際は、<article>、<aside>、<section>のいずれかが親であり、親の最初の子である必要があります。-->
40				<script>
41					//#delをクリックでメッセージ削除
42					const del = document.getElementById('del');
43					const hidden = document.getElementById('message');
44					del.addEventListener('click', function() {
45						hidden.style.display = 'none';
46					});
47				</script>
48			</section>
49	</div>
50
51  	<div class="middle">
52	  	<h1>旅を贈ろう。</h1>
53	  	<h3>Air bnbギフトカードで、世界をぐんと身近に</h3>
54	  	<input type="submit" value="ギフトカードを登録">
55	</div>
56    
57  </main>
58
59  <div class="message-container">
60    	<h2>いつも完璧な贈り物</h2>
61    <div class="iconwraper">
62      <div class="inner1">	
63    	<i class="far fa-envelope fa-3x mailicon"></i>
64    	<p>簡単に使える</p>
65    	<p class="explain">ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
66      </div>
67    
68
69      <div class="inner2">	
70    	<i class="fas fa-stopwatch fa-3x mailicon"></i>
71    	<p>有効期限なし</p>
72    	<p class="explain">Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
73      </div>
74
75      <div class="inner3">	
76    	<i class="fas fa-globe-europe fa-3x mailicon"></i>
77    	<p>忘れられない旅</p>
78    	<p class="explain">お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
79      </div>
80  </div>
81  	
82  <div class="present">
83  	<img src="https://a0.muscache.com/airbnb/gift_credit_v2/Home Page/Present Icon/Present Icon.png" alt="">
84  	<h2>ギフトカードを貰ったら...</h2>
85  	<h3>ログインあるいは、利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</h3>
86  	<input type="submit" value="ギフトカードを登録する">
87  	<p>Air bnbギフトカードの仕組みは？</p>
88  </div>
89<!-- Optional JavaScript -->
90    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
91    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
92    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
93    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
94</body>
95</html>
96

CSS
1コード
2@charset "UTF-8";
3
4/* RESET CSS */
5html, body, div,button, span, h1, h2, h3, h4, h5, h6, p, a, img, small, ul, li, article, aside, section, footer, header,  nav , input {
6	margin: 0;
7	padding: 0;
8	border: 0;
9	font: inherit;
10	vertical-align: baseline;
11	list-style-type: none;
12}
13
14header .header-container {
15	height : 80px;
16	width : 100%;
17	background-color: white;
18	position : relative;
19}
20
21
22header .menu-box {
23    height : 80px;
24    width : 60%;
25    background-color: white;
26    display: flex;
27}
28
29
30header .logo {
31	padding-top: 15px;
32	color: red;
33	width: 10%;
34}
35
36header .fa-airbnb {
37		font-size: 35px;
38}
39
40header input {
41    border-radius: 5px;
42}
43
44header .search {
45	border: 1px solid;
46	border-color: rgba(200,200,200,0.5);
47	margin-top: 20px;
48	width: 460px;
49	height: 45px;
50	font-weight: bold;
51	box-shadow:5px 5px 10px grey;
52}
53
54nav {
55	width: 60%;
56	position: absolute;
57	top: 0;
58	right: 0;
59	padding-top: 25px;
60}
61
62ul {
63	width: 100%;
64	display: flex;
65	justify-content: flex-end;
66	align-items: center;
67}
68
69ul li {
70	padding-left: 5px;
71	padding-right: 30px;
72	font-weight: bold;
73}
74
75a {
76  color: black;
77  text-decoration: none;
78}
79
80a:hover {
81  color: black; 
82  text-decoration: none;
83  border-bottom: 2px solid black;
84  padding-bottom: 32px;
85}
86
87main {
88	background-image : url("../pic.jpg");
89	background-size: cover;
90	height : 650px;
91	width: 100%;
92	color: white;
93	position: relative;
94}
95
96.close {
97	margin-top: 10px;
98	margin-right: 10px;
99}
100
101main div:nth-child(1) {
102	width: 100%;
103	height: 50px;
104	background: #C2E4E7;
105}
106
107main div:nth-child(1) h2 {
108	color : black;
109	text-align: center;
110	padding-top: 5px;
111	font-size : 15px;
112	font-weight: normal;
113}
114
115.fa-speakap {
116	padding: 0 10px;
117}
118
119main .middle {
120    padding-left: 20%;
121    padding-top: 20%;
122    height: 200px;
123}
124
125main .middle h1 {
126    font-size: 46px;
127    font-weight: bold;
128}
129
130main .middle h3 {
131    padding-top: 10px;
132    padding-bottom: 30px;
133    font-size: 18px;
134}
135
136main .middle input {
137    padding: 13px 22px;
138    border-radius: 5px;
139    background-color: white;
140    font-weight: bold;
141}
142
143.message-container {
144	height : 500px;
145	width : 100%;
146}
147
148.message-container h2 {
149	font-size: 30px;
150	text-align: center;
151	padding: 40px;
152	font-weight: bold;
153}
154
155.iconwraper {
156	position: relative;
157	
158	padding-bottom: 75px;
159}
160
161.mailicon {
162	color : green;
163	padding-bottom: 20px;
164}
165
166.mailicon2 {
167	color : grey;
168	padding-bottom: 20px;
169}
170
171.inner1,.inner2,.inner3 {
172	height : auto;
173	text-align: center;
174	width : 33%;
175	display: inline-block;
176	vertical-align: top;
177}
178
179.message-container p {
180   font-size :16px;
181   font-weight: bold;
182   padding-right: 15px;
183   padding-left: 15px;
184}
185
186.message-container .explain {
187  font-size: 16px;
188  opacity: 0.5;
189  padding-top: 5%;
190}
191
192.present {
193	background-color: #007a87;
194	height: 440px;
195	padding-top : 45px;
196	text-align: center;
197}
198
199.present h2{
200	color: white;
201	padding-top: 10px;
202	padding-bottom: 15px;
203}
204
205.present h3{
206	color: white;
207	font-size: 20px;
208}
209
210.present input {
211	background-color: red;
212	padding : 10px 28px;
213	border-radius: 5px;
214	color : white;
215	font-weight: bold;
216	margin-top : 60px;
217}
218
219.present input:hover {
220	color: #fff;
221	opacity :0.7;
222}
223
224.present p {
225	color : white;
226	opacity :0.7;
227	font-weight: normal;
228    font-size: 15px; 
229    margin-top: 20px;
230}
231
232//以下、レスポンシブ用//
233@media screen and (max-width: 480px) {
234	header .header-container {
235	height : 64px;
236	vertical-align: center;
237	display: flex;
238	justify-content: flex-start; }
239}
240
241@media screen and (max-width: 480px) {
242header .menu-box {
243    justify-content: flex-start;}
244}
245
246@media screen and (max-width: 480px) {
247header .logo {
248	padding: 0; 
249    padding-left: 15px;
250    padding-bottom: 15px;
251    margin-bottom: 20px;
252    vertical-align: center;}
253}  
254
255@media screen and (max-width: 480px) {
256.fa-airbnb {
257		padding: 0;}
258}
259
260@media screen and (max-width: 480px) {
261.search {width: 700px;}
262}
263
264@media screen and (max-width: 480px) {
265	nav { display: none;}
266}
267
268@media screen and (max-width: 480px) {
269	ul li { display: none; }
270}
271
272@media screen and (max-width: 480px) {
273main div:nth-child(1) {
274	display: none; }
275}
276
277@media screen and (max-width: 480px) {
278main {height : 400px;　}
279｝	
280
281@media screen and (max-width: 480px) {
282main .middle  {
283    padding: 0 !imprtant; }
284}
285
286@media screen and (max-width: 480px) {
287main .middle h1 {
288    font-size: 38px; }
289}
290
291@media screen and (max-width: 480px) {
292.iconwraper {height: 580px;}
293}
294
295@media screen and (max-width: 480px) {
296.inner1,.inner2,.inner3 { 
297	 width: 100%;
298	 padding-bottom: 20px; }
299}
300
301@media screen and (max-width: 480px) {
302.present {
303	height: 460px; }
304}
305
306@media screen and (max-width: 480px) {
307.present h2{
308	color: white;
309	font-size: 32px;
310	padding-left: 10px;
311	padding-right: 10px;
312	padding-bottom: 10px; }
313}
314
315@media screen and (max-width: 480px) {
316.present h3 {
317	padding-left: 8px;
318	padding-right: 8px; }
319}
320
321@media screen and (max-width: 480px) {
322.present input {
323	width: 95%; 
324    margin-top: 30px;
325    padding: 9px 28px;}
326}
327
328@media screen and (max-width: 480px) {
329hr {display: none}
330}
331
332
333

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

回答1件

ベストアンサー

1は、該当箇所のCSSを下記に変えれば、うまく真ん中になるかと。

CSS
1main .middle {
2    padding-left: 20%;
3    /* 高さを親ブロックと同じかつ、messageの高さ分マイナスした高さにした */
4    height: calc(100% - 50px);
5    /* display: flexを使い、子要素が真ん中にくるよう調整 */
6    display:flex;
7    flex-direction: column;
8    justify-content:center;
9}
10/* flexを使うと、なぜか、inputが伸びてしまったので、横幅を適用 */
11main .middle input {
12  width: 190px;
13}

2は、タイポミスです。

css
1@media screen and (max-width: 480px) {
2main {height : 400px;　}
3｝

よく見てみてください。
ブロック終了の波括弧が、全角になってます。
故にそれ以降のCSSが無効になってます。

さらに、padding: 0 !important;だと、適用されなかったので、下記のようにします。

CSS
1@media screen and (max-width: 480px) {
2  main .middle  {
3    padding: 0 10%;
4    /* ついでに、上で適用させた高さを100%にする */
5    height: 100%;
6  }
7}

3は、CSSの優先権の問題です。
.search単体より、
header .searchの方が優先権が強いため、
下のメディアクエリ内のCSSで上書きできていないためです。
他の部分も調整し、うまく意図通り動くようにしたのが下記です。

CSS
1@media screen and (max-width: 480px) {
2  /* 他の部分も、いい感じになるよう調整 */
3  header .menu-box {
4    margin-right: 15px;
5    width: auto;
6  }
7  .menu-box .logo {
8    margin-top: 15px;
9    width: 60px;
10  }
11  /* 優先権の強さを同じにし、隙間と大きさを調整 */
12  header .search {
13    margin-top: 15px;
14    width: calc(100% - 60px);
15  }
16}

投稿2019/05/15 15:58

miyabi_pudding

総合スコア9572

ShinYam

2019/05/15 16:42

miyabi_takatsukさん回答ありがとうございます！ずっと考えてもわからなかったのにすぐ解決していただき、びっくりです。１．calcとflexboxの利用をしたらよかったんですね。２．全角になっているのに気づきませんでした。逆に何故すぐわかったのですか？　　何かチェックするツールを使用されたのでしょうか？３．メディアクエリを使用していても、優先度が低ければ適用されないのですね！知りませんでした。　　優先度を考えながらの設計、ますます難しいです。精進いたします。

miyabi_pudding

2019/05/15 16:50

1に関して、flexboxと、calcはかなり便利で、応用技がいろいろあるので、よく勉強されるといいかと思います。 2は、コードをこちらの方で、コーディングアプリケーションにて、コピペさせていただいた時に、要素検証をしてCSSそのものが効いてなかったのと、コードカラーリングで気づきました。 3に関して、他にも、.hogeのクラス定義より、#hogeのid定義の方が強い、指定詳細度が高い方が強い、（今回のように、.hoge単体より、.mogu .hogeのように指定詳細度が高い方）など様々な仕様がありますので、調べられるといいと思いますよー。

ShinYam

2019/05/16 14:30

ありがとうございます。今回教えて頂いたことを活かしていきながら、勉強もしていこうと思います。

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