レイアウトが上手く出来ない

Footer部分のレイアウトで複数問題が発生していて、解決方法がどうしてもわからなかったため質問させてください。
下記のHTML,CSS構成において、Footer部分で以下の問題があります。
なるべく、今書いてあるものを修正して問題解決したいのですが、お知恵をお貸しいただけないでしょうか。
よろしくお願いいたします。

※模写サイト（https://www.airbnb.jp/gift）
１．listwrapperの下にボーダーラインを引きたいが、ブラウザ幅いっぱいに引かれてしまう。
marginやpaddingを左右に入れると段落が崩れるし、widthを数値にするとflexが解除されるのか、
中央揃えが左揃えになってしまうなど、どうしたら良いのかわかりません...

２．bothwrapper内にAir bnbのロゴをiタグで呼び出しているものの、ロゴが表示されない。
検証ツールで見ると表示が0×0となっていて意味不明です。

３．leftwrapperとその上に表示される<li class="title">Air bnb</li>の列を揃えたいが、
（ブラウザ収縮時も互いの位置がずれないように）ズレるし、収縮時に列崩れがすぐ発生してします。

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.6.1/css/all.css" rel="stylesheet">
8     <!-- Required meta tags -->
9    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
10<!-- Bootstrap CSS -->
11    <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">
12	<link rel="stylesheet" href="css/index.css" />
13  </head>
14 <body>
15  <header>
16  	<div class="header-container">
17  		<div class="menu-box">
18  			<div class="logo"></div>
19  			<div class="search"></div>
20  		</div>
21        
22        <nav>
23	  		<ul>
24	         　 <li><a href="#">ホストをはじめる</a></li>
25	            <li><a href="#">ヘルプ</a></li>
26		 		<li><a href="#">登録する</a></li>
27		 		<li><a href="#">ログイン</a></li>
28	  		</ul>
29  	　　</nav>
30  	</div>
31  </header>
32  <main>
33  	<div><!-- nth-child(1) -->
34			<section id="message">
35				<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>のいずれかが親であり、親の最初の子である必要があります。-->
36				<script>
37					//#delをクリックでメッセージ削除
38					const del = document.getElementById('del');
39					const hidden = document.getElementById('message');
40					del.addEventListener('click', function() {
41						hidden.style.display = 'none';
42					});
43				</script>
44			</section>
45	</div>
46
47  	<div class="middle">
48	  	<h1>旅を贈ろう。</h1>
49	  	<h3>Air bnbギフトカードで、世界をぐんと身近に</h3>
50	  	<input type="submit" value="ギフトカードを登録">
51	</div>
52    
53  </main>
54
55  <div class="message-container">
56    	<h2>いつも完璧な贈り物</h2>
57    <div class="iconwraper">
58      <div class="inner1">	
59    	<i class="far fa-envelope fa-3x mailicon"></i>
60    	<p>簡単に使える</p>
61    	<p class="explain">ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
62      </div>
63    
64
65      <div class="inner2">	
66    	<i class="fas fa-stopwatch fa-3x mailicon"></i>
67    	<p>有効期限なし</p>
68    	<p class="explain">Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
69      </div>
70
71      <div class="inner3">	
72    	<i class="fas fa-globe-europe fa-3x mailicon"></i>
73    	<p>忘れられない旅</p>
74    	<p class="explain">お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
75      </div>
76  </div>
77  	
78  <div class="present">
79  	<img src="https://a0.muscache.com/airbnb/gift_credit_v2/Home Page/Present Icon/Present Icon.png" alt="">
80  	<h2>ギフトカードを貰ったら...</h2>
81  	<h3>ログインあるいは、利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</h3>
82  	<input type="submit" value="ギフトカードを登録する">
83  	<p>Air bnbギフトカードの仕組みは？</p>
84  </div>
85
86  <footer>
87  	<div class="listwrapper">
88	    <div class="list">
89	      <ul>
90	      	<li class="title">Air bnb</li>
91	      	<li class="empty"></li>
92	      	<li class="lists"><a>採用情報</a></li>
93	      	<li class="lists"><a>プレス</a></li>
94	      	<li class="lists"><a>ポリシー</a></li>
95	      	<li class="lists"><a>ヘルプ</a></li>
96	      	<li class="lists"><a>ダイバーシティ＆ビロンギング</a></li>
97	      	<li class="lists"><a>企業情報</a></li>
98	      </ul>
99	    </div>
100
101	    <div class="list">
102	      <ul>
103	      	<li class="title">スタッフのおすすめ</li>
104	      	<li class="empty"></li>
105	      	<li class="lists"><a>信頼＆安全</a></li>
106	      	<li class="lists"><a>お友達紹介クーポン</a></li>
107	      	<li class="lists"><a>Airbnb Citizen</a></li>
108	      	<li class="lists"><a>出張</a></li>
109	      	<li class="lists"><a>ガイドブック</a></li>
110	      	<li class="lists"><a>Airbnbmag</a></li>
111	      </ul>
112	    </div>
113
114	    <div class="list">
115	      <ul>
116	      	<li class="title">ホスティング</li>
117	      	<li class="empty"></li>
118	      	<li class="lists"><a>ホストになる理由</a></li>
119	      	<li class="lists"><a>おもてなしの心</a></li>
120	      	<li class="lists"><a>ホストの責任</a></li>
121	      	<li class="lists"><a>コミュニティセンター</a></li>
122	      	<li class="lists"><a>体験を掲載</a></li>
123	      	<li class="lists"><a>オープンホーム</a></li>
124	      </ul>
125	    </div>
126
127	    <div class="list">
128	      <ul>
129	      	<li class="lists">
130	      		<a href="#"><i class="fab fa-facebook-f fa-lg"></i></a>
131	      		<a href="#"><i class="fab fa-twitter fa-lg"></i></a>
132	      		<a href="#"><i class="fab fa-instagram fa-lg"></i></a>
133	      	</li>
134	      	<li class="empty"></li>
135	      	<li class="lists"><a>利用規約</a></li>
136	      	<li class="lists"><a>プライバシー</a></li>
137	      	<li class="lists"><a>サイトマップ</a></li>
138	      </ul>
139	    </div>
140    </div>
141
142    <div class="copy">
143      <div class="bothwrapper">	
144	      <div class="leftcontainer">
145	    	<i class="fab fa-airbnb fa-3x"></i>
146	    	<a href="#">Arcbmb Global Services Limited<br>観光◎長◎(1)第S0XXXX号(2118年6月15日-2223年6月14日)</a><br>© 2019 Arcbmb, Inc. All rights reserved.
147	      </div>
148      </div>
149    </div>
150
151
152  </footer>
153
154</body>
155</html>
156

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

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

回答2件

ベストアンサー

１．listwrapperの下にボーダーラインを引きたいが、ブラウザ幅いっぱいに引かれてしまう。

marginやpaddingを左右に入れると段落が崩れるし、widthを数値にするとflexが解除されるのか、
中央揃えが左揃えになってしまうなど、どうしたら良いのかわかりません...

このデザインを再現したいなら、wataameさんが回答しているように4つのカラムの親要素となっている.listwrapper にmax-widthで固定値の最大幅を設定するのが定石です。

「中央揃えが左揃えになる」のはflexが解除されるのではなく、ボックスに親要素よりも小さいサイズの幅が設定された場合には左寄せで配置される仕様通りの挙動です。
親要素より小さいサイズで幅を固定したボックスそのものを中央に配置したい場合には、そのボックスの左右のmarginをautoに設定します。そうすることで余った余白を左右均等に割り振って結果的にボックスを中央に配置してくれます。

また、wataameさんへのコメントに書かれている「１番はその設定だと下線が長く、widthを狭くすると中身の段が崩れたりするので、厳しそう」という点ですが、これは親要素のボックス幅を希望するサイズで固定することを前提として、その中に入っている子要素側のwidth/margin/paddingを調整することで親要素に収まるように指定し直してください。
CSSレイアウトは外側のボックスから内側のボックスに向かって順番にスタイルを定義してしていくのが原則なので、
今回のように先に内側のボックスにスタイルを定義してしまってから外側のボックスのスタイルをどうこうしようとすると、無理が生じやすいのです。
そもそもの考え方が逆なので、無理に今の状態に手を入れるより、原則に従って外側のボックスから順にパズルを組み直すことをおすすめします。

３．leftwrapperとその上に表示される<li class="title">Air bnb</li>の列を揃えたいが、

（ブラウザ収縮時も互いの位置がずれないように）ズレるし、収縮時に列崩れがすぐ発生してします。

「列を揃えたい」が何を意味しているのか分かりませんが、収縮時にスタイルが崩れるのは、各列（.list）の左右に固定で55pxのmarginが設定されているからですね。
ここはflexboxで横並びにしているのでカラム落ちは回避されていますが、pxで余白が固定されているのでその分コンテンツ領域が潰されてしまい、レイアウトが崩れる結果となっています。
仮にfloatやinline-blockで横並びにしていた場合は、収縮時に確実にカラム落ちが発生する事案です。

同一比率を保ったまま伸縮するようにレイアウトしたければ、
横方向のサイズ指定（width/marign/padding）は全て%で設定してください。
またその際、子要素のwidth/margin/paddingの%値を全て合計した値が100%を超えないように注意しましょう。flexboxを使っていればカラム落ちになる可能性は下がりますが、超過が大きくなるとレイアウト崩れに繋がりますので。

投稿2019/05/09 07:54

aKusano

総合スコア3763

ShinYam

2019/05/09 12:56

丁寧な説明、ありがとうございます！すごくわかりやすくて腑に落ちました。確かに中の方から作っていたところがありましたので、大枠からデザインをしていくようにしたいと思います。回答ありがとうございます！

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

1：airbnbの見て合わせるとこんな感じでしょうか、、

footer {
    margin-top: 60px;
    max-width: 1080px;
    padding: 24px;
    margin: auto;
}

２：バージョン問題だと思います、、

 <link href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" rel="stylesheet">

バージョンあげれば反映されるかと思います。

３：leftwrapperではなくlistwrapperでしょうか。。
そもそもレスポンシブでブレイクポイントが書かれていないのでそうなると思います、、

模写は大変ですね、、

投稿2019/05/07 16:48

wataame

総合スコア302

ShinYam

2019/05/08 13:46

wataameさん、回答ありがとうございます！２番はおっしゃる通りバージョンの問題でした！おかげさまで無事解決しました１番はその設定だと下線が長く、widthを狭くすると中身の段が崩れたりするので、厳しそうでした・・・なかなか模写は大変ですｗ

wataame

2019/05/08 15:50

1番目と3番目も基本はレスポンシブの問題です。もし目標が「模写する」ことではなく、「サイトを作る（or　作っていたい）」であるならばちゃんとした方法はあります。質問投稿していただければ回答します、、参考までに。

ShinYam

2019/05/09 12:59

ありがとうございます！今回は模写にこだわりすぎず、ｈｒで線を引く方法を選びました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

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

レイアウトが上手く出来ない

関連した質問