fontawesomeを使ったヘッダー部分を作りたい

1枚目の画像の模写をしたいのですが、2枚目の画像のように崩れてしまいます。
fontAwesomeのdisplayをnoneにすると崩れは直りますが(画像3枚目)、blockにしたうえでの解決法を教えていただきたいです。

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    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="stylesheet.css">
8    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
9    <title>現地の人から借りる家、体験&スポット - Airbnb.html</title>
10</head>
11<body>
12    <header>
13        <div class="header-left">
14            <img class="main-logo" src="images/th.jpg" alt="">
15            <i class="fas fa-angle-down"></i>
16            <div class="header-search">
17                <img src="images/thE7NFLMJE.jpg" alt="">
18                <input type="search" placeholder="探す">
19            </div>
20        </div>
21        <div class="header-right">
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>

css
1@charset "UTF-8";
2
3* {
4    margin: 0;
5    list-style: none;
6    font-family: Circular, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "MS Gothic", "ＭＳ ゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
7    
8}
9header {
10    height: 80px;
11}
12.header-left {
13    float: left;
14    width: 800px;
15}
16.main-logo {
17    float: left;
18    height: 30px;
19    padding: 25px 17px;
20}
21.header-left .fas {
22    display: none;
23}
24.header-search {
25    float: left;
26    padding: 27px 18px 8px;
27    width: 450px;
28    transition: all 0.5s;
29}
30.header-search:hover {
31    border-bottom: gray solid 2px;
32}
33.header-search img {
34    float: left;
35    height: 20px;
36    margin: 4px 20px 0 0;
37}
38.header-search input {
39    border: none;
40    font-weight: 800;
41    font-size: 17px;
42    color: #484848;
43}
44
45@media screen and (max-width:450px) {
46    header {
47        width: 100%;
48        height: 64px;
49    }
50    .header-left {
51        width: 100%;
52        height: 64px;
53    }
54    .main-logo {
55        height: 34px;
56        padding: 18px 14px;
57    } 
58    .header-left .fas {
59        display: block;
60        width: 10px;
61        height: 16px;
62    }   
63    .header-search {
64        width: 241px;
65        height: 48px;
66    }
67    .header-search img {
68        margin: 0 10px;
69    }
70    .header-search input {
71        width: 184px;
72        height: 22px;
73    }
74    .header-right {
75        display: none;
76    }
77}

kei344

2019/03/27 03:47

コードがコードブロックから出ています。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

maisumakun

2019/03/27 03:58

FontAwesomeは5のCSS版を利用、で間違いないですか？

omyu

2019/03/27 04:04

ご指摘ありがとうございます！

omyu

2019/03/27 04:07

はい、間違いありません。

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

回答1件

ベストアンサー

floatではなくflexを使ってみたらいかがでしょうか。

css
1.header-left {
2    /*float: left;  floatをやめる*/
3    display: flex;
4    width: 800px;
5}

こうすれば.header-left内の他の子要素もfloatではなくdisplay: block;が使えます。
ちなみにfloatを使ってレイアウトを組むのは一昔前のやり方です。

投稿2019/03/28 15:10

編集2019/03/28 15:13

cerfweb

総合スコア1899

omyu

2019/03/29 03:25

ありがとうございます。 flexの使い方をもう少し勉強してみます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

fontawesomeを使ったヘッダー部分を作りたい

関連した質問