レイアウトが上手くいかない（Air bnb模写）

下記、Airbnbのページを参考に模写しています。
リンク内容
ヘッダーの検索部分と、４つのリストメニューを平行にならべる部分と、アラート部分がうまくいきません。
上手くいかないと思うのは以下の２点です。

１．
リストメニューが何もしない状態だと最上部にくっつくため、paddingで中央に寄せたのですが、そうするとバックグラウンドの色がずれます。
今回は白バックが完成形なので気にしなくても良くはあるのですが、バックグラウンドカラー幅を変えずにメニューを中央寄せする改善方法はないでしょうか？

２．
アラートが出ている状態だと、listのバックグラウンド幅が下に伸びてしまうのと、アラートと写真の間に若干隙間が出来るのが気になります。

よろしければ理屈的な部分など、ご教授いただけますと助かります。

HTML
1コード
2<!DOCTYPE html>
3<html>
4  <head>
5    <title>Airbnbcopy</title>
6    <link rel="stylesheet" type="text/css" href="Airbnb.css">
7    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
8     <!-- Required meta tags -->
9    <meta charset="utf-8">
10    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
11
12    <!-- Bootstrap CSS -->
13    <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">
14
15  </head>
16
17 <body>
18  <header>
19  	<div class="header-container">
20      
21    <input id="input02" type="text" placeholder="検索"><!--
22    /input間で改行したい場合はコメントアウト必須/
23    --><input id="submit02" type="submit" value="">
24   
25  	 </div>
26
27  	 <div class="list">
28  	 <ul class="xp">
29   		<li><a class="link" href="#">ホストをはじめる</a></li>
30		<li><a class="link"	href="#">ヘルプ</a></li>
31		<li><a class="link" href="#">登録する</a></li>
32		<li><a class="link" href="#">ログイン</a></li>
33	 </ul>
34	 </div>
35	 <div class="clear"></div>
36  </div>
37  <div class="alert alert-warning alert-dismissible fade show" role="alert">
38  今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。
39  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
40    <span aria-hidden="true">&times;</span>
41  </button>
42</div>
43
44  <div class="main">
45  	<div class="middle">
46  	<H1>旅を贈ろう。</H1>
47  	<H3>Airbnbギフトカードで、世界をぐんと身近に</H3>
48  	</div>
49  </div>
50
51  </header>
52
53
54
55
56  <!-- Optional JavaScript -->
57    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
58    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
59    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
60    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
61</body>
62</html>

CSS
1コード
2.logo {
3	float: left;
4}
5
6.home {
7	padding-top: 5px;
8}
9
10.glass {
11	size: 10%;
12}
13
14.header-container {
15	background-color : blue;
16	padding: 10px;
17	padding-bottom:15px;
18	height: 75px;
19	float: left;
20}
21
22.list  {
23	padding-top: 30px; 
24	height: 75px;
25}
26
27.clear {
28	clear: both;
29}
30
31.xp {
32  background-color: red;
33  display: flex;
34  justify-content: flex-end;
35
36 
37}
38
39
40.selector {
41	color : red;
42}
43
44.link {
45	color: black;
46	margin-left: 15px;
47	text-align: left;
48	text-decoration: none;
49}
50
51.search {
52	padding-top: 10px;
53}
54
55.searching {
56	background-image: url("虫眼鏡.PNG")
57}
58
59.links {
60	float : left;
61}
62
63.alert-dismissible {
64	margin-top: 1px;
65}
66
67img {
68	float : left;
69}
70
71input {
72	margin-right: 1150px;
73	float: left;
74}
75
76li {
77	padding : 0 0 0 0;
78	list-style: none; 
79	float : left;
80	padding-bottom: 120px;
81	display: inline-block; 
82}
83
84.main {
85	background-image: url(pic.jpg) ;
86	background-size: cover;
87	z-index: 1;
88	height: 600px;
89	width: 100%;
90
91}
92
93.middle {
94   margin-left: 400px;
95   padding-top: 200px;
96}
97
98H1 {
99	z-index: 2;
100	color: white;
101	font-size: 50px;
102}
103
104H3 {
105	color: white;
106}
107
108

CSS2
1コード
2.logo {
3	float: left;
4}
5
6.home {
7	padding-top: 5px;
8}
9
10.glass {
11	size: 10%;
12}
13
14.header-inner {
15    display: flex; //追加コード
16    align-items: stretch; //追加コード
17    height: 80px; //追加コード
18}
19
20.header-container {
21    background-color : yellow;
22    padding: 25px 10px; //数値変更
23    /* padding-bottom:15px; */
24    /* height: 75px; */
25    /* float: left; */
26    width: 204px; //追加コード
27}
28
29.list  {
30    /* padding-top: 30px; */
31    /* height: 75px; */
32    width: calc(100% - 204px); //追加コード
33 }
34
35.clear {
36	clear: both;
37}
38
39.xp {
40    background-color: red;
41    display: flex;
42    justify-content: flex-end;
43    height: 100%; //追加コード
44    align-items: center; //追加コード
45    margin: 0; //追加コード
46}
47
48.selector {
49	color : red;
50}
51
52.link {
53	color: black;
54	margin-left: 15px;
55	text-align: left;
56	text-decoration: none;
57}
58
59.search {
60	padding-top: 10px;
61}
62
63.searching {
64	background-image: url("虫眼鏡.PNG")
65}
66
67.links {
68	float : left;
69}
70
71.alert {
72    margin-bottom: 0 ! important; //追加コード
73}
74.alert-warning {
75    margin: 0; //追加コード
76}
77
78.alert-dismissible {
79	margin-top: 1px;
80}
81
82img {
83	float : left;
84}
85
86input {
87	margin-right: 1150px;
88	float: left;
89}
90
91li {
92    padding : 0 0 0 0;
93    list-style: none;
94    /* float : left; */
95    /* padding-bottom: 120px; */
96    display: inline-block; //追加コード
97}
98
99.main {
100	background-image: url(pic.jpg) ;
101	background-size: cover;
102	z-index: 1;
103	height: 600px;
104	width: 100%;
105
106}
107
108.middle {
109   margin-left: 400px;
110   padding-top: 200px;
111}
112
113H1 {
114	z-index: 2;
115	color: white;
116	font-size: 50px;
117}
118
119H3 {
120	color: white;
121}
122

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

回答1件

ベストアンサー

手順としては、
①HTMLの.header-containerと.listをひとつのタブにまとめる。
②CSSでスタイルの調整
となります。

①はdivタグでまとめ、class="header-inner"を指定しました。

HTML
1    <div class="header-inner">
2        <div class="header-container">
3            <input id="input02" type="text" placeholder="検索">
4            <!-- /input間で改行したい場合はコメントアウト必須/ -->
5            <input id="submit02" type="submit" value="">
6        </div>
7
8        <div class="list">
9            <ul class="xp">
10                <li><a class="link" href="#">ホストをはじめる</a></li>
11                <li><a class="link"    href="#">ヘルプ</a></li>
12                <li><a class="link" href="#">登録する</a></li>
13                <li><a class="link" href="#">ログイン</a></li>
14            </ul>
15        </div>
16    </div>

②のスタイルは、以下になります。
（削除した部分がわかるように、コメントアウトで表示しています。）

CSS
1.header-inner {
2    display: flex; //追加コード
3    align-items: stretch; //追加コード
4    height: 80px; //追加コード
5}
6.header-container {
7    background-color : blue;
8    padding: 25px 10px; //数値変更
9    /* padding-bottom:15px; */
10    /* height: 75px; */
11    /* float: left; */
12    width: 204px; //追加コード
13}
14.list  {
15    /* padding-top: 30px; */
16    /* height: 75px; */
17    width: calc(100% - 204px); //追加コード
18}
19.xp {
20    background-color: red;
21    display: flex;
22    justify-content: flex-end;
23    height: 100%; //追加コード
24    align-items: center; //追加コード
25    margin: 0; //追加コード
26}
27li {
28    padding : 0 0 0 0;
29    list-style: none;
30    /* float : left; */
31    /* padding-bottom: 120px; */
32    display: inline-block; //追加コード
33}
34.alert {
35    margin-bottom: 0 ! important; //追加コード
36}
37.alert-warning {
38    margin: 0; //追加コード
39}

アラートと写真の間に若干隙間が出来る

こちらのアラートとは「今のところ、ギフトカードはアメリカ居住者～」のバーの部分でしょうか？
場所の認識があっていれば、こちらの隙間は.alertにmargin指定されているのが原因です。
margin: 0;を指定すれば隙間はなくなります。

以下、サンプルコード（codepen）です。
https://codepen.io/otamu/pen/qwoKMd

数日保存しておりますので、合わせてご確認くださいませ。

追記：コードの再送付（2019.04.20）

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Airbnbcopy</title>
5    <link rel="stylesheet" type="text/css" href="Airbnb.css">
6    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
7     <!-- Required meta tags -->
8    <meta charset="utf-8">
9    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=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  </head>
14
15 <body>
16  <header>
17    <div class="header-inner">
18        <div class="header-container">
19            <input id="input02" type="text" placeholder="検索">
20            <!-- /input間で改行したい場合はコメントアウト必須/ -->
21            <input id="submit02" type="submit" value="">
22        </div>
23
24        <div class="list">
25            <ul class="xp">
26                <li><a class="link" href="#">ホストをはじめる</a></li>
27                <li><a class="link"    href="#">ヘルプ</a></li>
28                <li><a class="link" href="#">登録する</a></li>
29                <li><a class="link" href="#">ログイン</a></li>
30            </ul>
31        </div>
32    </div>
33     <div class="clear"></div>
34  </div>
35  <div class="alert alert-warning alert-dismissible fade show" role="alert">
36  今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。
37  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
38    <span aria-hidden="true">&times;</span>
39  </button>
40</div>
41
42  <div class="main">
43      <div class="middle">
44      <H1>旅を贈ろう。</H1>
45      <H3>Airbnbギフトカードで、世界をぐんと身近に</H3>
46      </div>
47  </div>
48
49  </header>
50
51
52
53
54  <!-- Optional JavaScript -->
55    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
56    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
57    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
58    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
59</body>
60</html>

CSS
1.logo {
2    float: left;
3}
4
5.home {
6    padding-top: 5px;
7}
8
9.glass {
10    size: 10%;
11}
12
13.header-inner {
14    display: flex;
15    align-items: stretch;
16    height: 80px;
17}
18
19.header-container {
20    background-color : yellow;
21    padding: 25px 10px;
22    width: 204px;
23}
24
25.list  {
26
27    width: calc(100% - 204px);
28 }
29
30.clear {
31    clear: both;
32}
33
34.xp {
35    background-color: red;
36    display: flex;
37    justify-content: flex-end;
38    height: 100%;
39    align-items: center;
40    margin: 0;
41}
42
43.selector {
44    color : red;
45}
46
47.link {
48    color: black;
49    margin-left: 15px;
50    text-align: left;
51    text-decoration: none;
52}
53
54.search {
55    padding-top: 10px;
56}
57
58.searching {
59    background-image: url("虫眼鏡.PNG")
60}
61
62.links {
63    float : left;
64}
65
66.alert {
67    margin-bottom: 0 ! important;
68}
69.alert-warning {
70    margin: 0;
71}
72
73img {
74    float : left;
75}
76
77input {
78    float: left;
79}
80
81li {
82    padding : 0 0 0 0;
83    list-style: none;
84    display: inline-block;
85}
86
87.main {
88    background-image: url(pic.jpg) ;
89    background-size: cover;
90    z-index: 1;
91    height: 600px;
92    width: 100%;
93
94}
95
96.middle {
97   margin-left: 400px;
98   padding-top: 200px;
99}
100
101H1 {
102    z-index: 2;
103    color: white;
104    font-size: 50px;
105}
106
107H3 {
108    color: white;
109}

上記のコードをオンラインで確認したスクショです。

また別件ですが、検索枠の入力部分と右側のグレーの部分が改行されてずれていたので、inputタグにあったmargin-right: 1150px;を削除しております。
不要な対応でしたら申し訳ありません。

投稿2019/04/18 15:21

編集2019/04/19 15:35

otamunote

総合スコア281

ShinYam

2019/04/19 13:34

otamunote　さま丁寧な回答ありがとうございます！ alartにはあらかじめmarginが設定されているのですね。見えないのでわかりませんでしたが、０指定で上手くいきました。レイアウトもバックグラウンドカラーが設定したい範囲に反映されるようになりました！ただ、SublimeTextでやると、何故かlistの４項目がコンテナの上部に配置されてしまい、いただいたcodepenの例のように、真ん中に配置されませんでした。（CSS2）謎です。

otamunote

2019/04/19 15:24

ブラウザ側で要素に対し勝手に余白をつけてしまうので、最初にリセットCSSで余白を0設定しておくとよいと思います。 listの件ですが、私がオンラインで確認する限り不具合は見受けられませんでした。環境はsublime text3、サーバーはxserverです。エディダ依存で不具合が出るのはあまりないため、その原因はあまり考えにくいかと思います…。上記の回答に、追記で再度コードはります。コメントアウト等が中途半端に悪さをしている可能性もあるため、全て削除したコードのみのものと、私で確認したオンライン上でのスクショをお送りしますので、合わせてご確認いただければと思います。万が一キャッシュを削除しても反映されない場合、デペロッパーツールなどで一度.listにかかるCSSを確認してみてください。他の読み込んでいるファイル等が影響で、CSSが無効になっていることも稀に発生します。

ShinYam

2019/04/19 17:01

出来ました！デビロッパーツールで確認したところ、ｘｐのalign-items: center; が文字化けして無効状態になっており、コメントを削除したら反映されました！どうもありがとうございます。

ShinYam

2019/04/19 17:12

今回、おかげさまですごく勉強になりました。今後の再現性という点では論理的に追いついていないためまだ自信がありませんが... otamunoteさまからしたら今回の回答の趣旨としては、header-innerのような大枠を設けていないと調整がしにくいよ。レイアウトをするのはalign-itemsを利用するのがやりやすいよ、といったところでしょうか？

otamunote

2019/04/20 00:19

無事に実装できたようで良かったです！今回一番重要なのは、要素を横並びにさせたdisplay: flex;の部分です。 flexboxは要素の縦・横軸の位置や並び順、折り返しなどをfloatよりも簡単に指定することができます。簡単にお伝えすると、今回はdisplay:flex;で横並びにし、align-items: center;で要素を垂直方向の中央に持ってきたという感じです。また、flexboxは親要素が必要なのでheader-innerを追加しまた。 flexboxは使い方によってとても便利なので、お時間あるときに試してみてください。 ◎CSS3のFlexboxを基本から理解して、使い倒そう！ https://liginc.co.jp/web/html-css/css/21024

ShinYam

2019/04/20 03:25

すごくわかりやすい説明で腑に落ちました！ Flexbox、リンクを参照に使ってみたいと思います。何から何までどうもありがとうございます！

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