headerがいつも上手くいかない。logoやnavがついた、シンプルなheaderコードを誰か教えてください????

現在Airbnbのサイト制作をしています。

headerにいつも苦戦してしまいます。解答例を知りたいです。
●(現在、ロゴを貼ろうとしてますが、headerに収まりきらず拡大されて表示されています)
●(widthやheightの値を操作しても変化なしです。。)

●headerはほぼ白紙状態です。
●footerは未制作です。

以下、全体のコードです。

------------------------------------HTMLです。---------------------------

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Airbnbでお家、アパート、お部屋をシェアしよう</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css" > <link rel="icon" href="airbnbpp.png" type="image/vnd.microsoft.icon" /> </head> <body> <header> <nav> <div class="inner flex"> <h1><a href="#"> <img src="airbnbpp.png" alt=""> </a></h1> </div> <div class="menu"> <ul class="flex"> <li>予想月収</li> <li>￥１３７，５１１</li> <button type="button1" class="btn btn-danger">はじめる</button> </ul> </div> </div> </nav> </header> <div class="apple">

<div class="card" style="width: 25rem; height: 29.5rem;" >
  <div class="card-body">
    <h5 class="card-title">Airbnbホストになって、暮らしをレベルアップ</h5>
    <p class="card-text">どれくらいの収入が見込めるかチェック</p>

      
      <input type="text" placeholder="ロケーション" class="location" value="京都">  

      <select name="stay" class="occupy">
        <option value="a">まるまる貸切</option>
        <option value="b">個室</option>
        <option value="c">シェアルーム</option>
      </select>

      <select name="number" value="ゲスト４人" class="guest">
        <option value="1">ゲスト１人</option>
        <option value="2">ゲスト２人</option>
        <option value="3">ゲスト３人</option>
        <option value="4">ゲスト４人</option>
        <option value="5">ゲスト５人</option>
        <option value="6">ゲスト６人</option>
        <option value="7">ゲスト７人</option>
        <option value="8">ゲスト８人</option>
        <option value="9">ゲスト９人</option>
        <option value="10">ゲスト１０人</option>
        <option value="11">２スト１１人</option>
        <option value="12">ゲスト１２人</option>
        <option value="13">ゲスト１３人</option>
        <option value="14">ゲスト１４人</option>
        <option value="15">ゲスト１５人</option>
        <option value="16">ゲスト１６人</option>
      </select>
      <h6 class="card-title">¥ 153,672</h6>

    <button type="button2" class="btn btn-danger" id="btn2">はじめる</button>
  </div>
</div>

</div> <div class="all"> <div class="container"> <div class="row"> <div class="one col-12 col-lg-4"> <div class="h4"> Airbnbでホストするこれだけの理由</div> <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p> </div>

    <div class="two col-12 col-lg-4">
      <div class="h4">Airbnbならホストも安心安全</div>
      <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
      <a href="#" class="a">ホストを守るAirbnbの仕組みをチェック</a>
    </div>

    <div class="three col-12 col-lg-4">
      <div class="h4">ゲストは認証済みです</div>
      <p>Airbnbは全ゲストを対象に、予約の前に一定の情報（認証済み電話番号、メールアドレスなど）の提供を求めています。 さらにご希望の場合は、ほかのホストからの推薦、認証済みIDの取得を追加要件として求めることもできます。</p>
    </div>  
  </div>
</div>

<div class="container"> <div class="row"> <div class="col-12 col-lg-4"> <div class="N1">1</div> <div class="h4">無料でお部屋を掲載</div> <p><p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p></p> </div>

  <div class="col-12 col-lg-4">
    <div class="N2">2</div>
      <div class="h4">ホスティング方法を設定</div>
      <p>スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。</p>
  </div>

  <div class="col-12 col-lg-4">
    <div class="N3">3</div>
      <div class="h4">はじめてのゲストが来ます！</div>
      <p>リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</p>
      <a href="#" class="a">ホストをはじめる方法をチェック</a>
  </div>
</div>

</div> <div class="A"> <img src="../mother.jpg" alt="ホストマザー"> <div class="s1"> <p class="s2">ホスティングの収入でキッチンを新調したり、<br>他の改装費用の一部を賄うことができました」</p> <p class="s3">Tessaさんはロンドン在住。<br>ホストになって経済的なゆとりができました</p> <button type="button" class="btn btn-light">実践例をチェック</button> </div> </div> </div> </body> </html>

---------------------------------------------CSSです。------------------

header {
width: auto;
height: 80px;
}

.inner {
width: 980px;
max-width: 100%;
margin: 0 auto;
}

.flex {
display: flex;
justify-content: space-between;
list-style: none;
}

nav > .flex {
align-items: center;
height: 110px;
}

li {
font-weight: bold;
margin-right: 10px;
}
.apple {
background-image: url("../airbnb.jpg");
background-size: cover;
height: 900px;
background-repeat: no-repeat;
position: relative;
background-color: cadetblue;
}

/* デスクトップ */

@media screen and (min-width:1000px) {
.card {
float: right;
margin: 32px;
}

.card-title {
font-weight: bold;
font-size: 40px;
margin-bottom: 15px;
text-align: left;
margin-top: 10px;
}

.card-text {
font-weight: bold;
font-size: 16px;

}

.btn {
font-weight: bold;
}

.location {
border-radius: 4px;
padding: 11px;
margin-bottom: 8px;
width: 360px;
}

.occupy {
border-radius: 4px;
padding: 11px 40px 11px 11px;
}

.guest {
border-radius: 4px;
padding: 11px 40px 11px 11px;
}

#btn2 {
width: 360px;
padding: 10px 22px;
margin-top: 1px;
}

img {
width: 380px;
height: 380px;
margin-bottom: 30px;
margin-left: 120px;
margin-right: 30px;
float: left;
}

.s1 {
margin-top: 70px;
}
.s2 {
columns: #484848;
font-size: 32px;
}
.s3 {
color: #767676;
font-size: 16px;
}
.btn {
font-weight: bold;
border: solid black;
font-size: 16px;
}
.air {
width: 80px;
height: 80px;
margin: 0;
}
}

/* デスクトップここまで */

/* モバイル */

@media screen and (max-width: 999px) {
.card {
display: none;
}
.greap {
font-size: 50px;
font-weight: bold;
color: aliceblue;
position: absolute;
bottom: 0;
width: 100%;
height: 20%;
text-align: center;
line-height: 50px;
letter-spacing: 2px;
}
img {
width: 350px;
height: 340px;
margin-top: 70px;
margin-right: 30px;
margin-left: 40px;
}

.s1 {
margin-top: 50px;
margin-left: 40px;
}
.s2 {
columns: #484848;
font-size: 22px;
}
.s3 {
color: #767676;
font-size: 16px;
}
.btn {
font-weight: bold;
border: solid black;
font-size: 16px;
}

}
/* モバイルここまで */

.all {
margin-right: auto;
margin-left: auto;
}

.h4 {
font-weight: bold;
margin-bottom: 20px;
margin-top: 10px;
}

.one {
margin-top: 30px;
}
.two {
margin-top: 30px;
}
.three {
margin-top: 30px;
}

.a {
color: rgb(49, 148, 115);
}

.N1 {
background-color: cadetblue;
width: 50px;
height: 50px;
border-radius: 100%;
color: aliceblue;
font-weight: bold;
text-align: center;
padding-top: 10px;
font-size: 20px;
margin-top: 40px;
margin-bottom: 20px;
}

.N2 {
background-color: cadetblue;
width: 50px;
height: 50px;
border-radius: 100%;
color: aliceblue;
font-weight: bold;
text-align: center;
padding-top: 10px;
font-size: 20px;
margin-top: 40px;
margin-bottom: 20px;
}

.N3 {
background-color: cadetblue;
width: 50px;
height: 50px;
border-radius: 100%;
color: aliceblue;
font-weight: bold;
text-align: center;
padding-top: 10px;
font-size: 20px;
margin-top: 40px;
margin-bottom: 20px;
}

m.ts10806

2020/02/10 12:06 編集

マークダウン利用されてないコードを読ませるのは酷です。 code機能利用してください。 > 解答例を知りたいです。模写であれば目の前にあるサイトが「解答例」なのでは。

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

回答1件

ベストアンサー

シンプルなheaderコードで良いならこちらでいかがでしょうか？

html
1<header>
2  <div class='logo'><img src="https://placehold.jp/300x100.png" alt="ロゴ"></div>
3  <nav>
4    <ul>
5      <li>リスト1</li>
6      <li>リスト2</li>
7      <li>リスト3</li>
8      <li>リスト4</li>
9    </ul>
10  </nav>
11</header>

css
1header {
2  width: 1000px;
3  margin: 0 auto;
4  display: flex;
5  justify-content: space-between;
6}
7
8.logo {
9  width: 150px;
10  height: 50px;
11}
12
13.logo img {
14  max-width: 100%;
15}
16
17nav ul {
18  display: flex;
19  list-style: none;
20}
21
22nav ul li {
23  margin-left: 15px;
24}