常連

メニューバーと画像の間に空白ができてしまいます。
画像がなぜか下がった状態になってしまいます。
青いメニュバーと風景画像の隙間の白い空白です


### 該当のソースコード

```html
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>AAAA</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="株式会社AAAのホームページです。">
    <meta name="keywords" content="AAAA">
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="css/anime.css">

    <header style="background-image:url(image/header.jpg)">
      <nav class="fix">
       <div class="inner flex">
         <div class="logo">
           <a>AAA</a>
         </div>

         <div class="menu">
           <ul class="flex">
             <li class="list"><a href="">MANUFACTURING</a></li>　
             <li class="list"><a href="">PRODUCT</a></li>　
             <li class="list"><a href="">COMPANY</a></li>　
             <li class="list"><a href="">RECRUIT</a></li>　
             <li class="list"><a href="">CONTACT</a></li>　
           </ul>
         </div>
     </nav>

     <body>
      <p class="menuchar">AAAAA CO.Ltd.</p>
     </body>

    <footer class="site-footer">
    </footer>


  </head>
<body>

  </body>
</html>

```
```css
/*メニューバーに関連するもの*/

*{
 border: 0;
 margin: 0;
 padding: 0;
}

header {
	background: url(../image/header.jpg) center / cover;/*headerに挿入する画像/ホーム画面*/
	position: relative;
	height: 110vh;/*縦の長さ*/
}

nav{
 background-color:#81bcd8;/*メニューバーの背景色指定*/
 height:100px;/*メニューバーの縦の大きさ*/
 width: 100%;/*メニューバーの横幅*/
 position: fixed;/*メニューバー固定*/
 top: 0;/*メニュバーの始まりの位置*/
 left:0;/*メニュバーの始まりの位置*/
}

.inner{
 max-width:100%;/*領域幅の最大値*/
 margin:0px auto;
 width:90%;/*横幅の指定*/
}
nav>.flex{
  align-items: center;/*子要素のアイテムを中央に寄せる*/
  height:100px;/*メニューの文字位置の高さ*/
}
.flex {
  display: flex;/*メニューバー並列化*/
  justify-content: space-between;/*メニューバーの要素をアイテムを均等に配置する*/
}

.flex li{
  margin-left:30px;
  list-style:none;/*リスト化の黒丸を消す*/
}
.logo a{
 color:#000000;/*文字色*/
 font-size:35px;/*文字サイズ*/
 font-weight:bold;/*太文字*/
}
li a{
  color:#000000;/*文字色*/
  font-size: 28px;
  text-decoration:none;/*下線を消す*/
}

.menuchar {/*画像の中の文字*/
  color: #FFFFFF;/*文字色*/
  font-size: 140px;/*文字の大きさ*/
  font-style: normal;/*文字スタイル*/
  text-align: left;/*文字のスタート位置*/
  margin: 400px 0px 0px 90px;/*野路の位置指定*/

}
```




![![イメージ説明](5ed914fe835d11b624e018582693d542.png)説明](12effb08b1182a3121a930990d8dcafe.png)](698738a98bab43514b1009deacd3361b.png)

メニューバーと画像の間に空白ができてしまいます

初めての質問になります、宜しくお願い致します。

現在１画面ずつスクロールするサイトを、Jqueryなどのプラグインを使用せずにJSで記述しようとしています。
作成にあたって以下のサイトの記載を参考に作成を進めているのですが**JSの記述で**いくつかわからない部分があり、その点に関して質問をさせていただければと思います。

参考サイト
・(https://mukuchi.work/wheelpage/）
参考サイトで紹介のデモページ
・(https://mukuchi.work/demos/wheelPage/)　

以下デモページで使用しているHTML・CSSになります。

```HTML
<div id="wrap">
  <div class="page1">1</div>
  <div class="page2">2</div>
  <div class="page3">3</div>
  <div class="page4">4</div>
  <div class="page5">5</div>
</div>
```

```CSS
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#wrap div {
  width: 100%;
  height: 100vh;
  line-height: 100vh;
  text-align: center;
  font-size: 30px;
}
.page1 { background-color: aqua; }
.page2 { background-color: antiquewhite; }
.page3 { background-color: tomato; }
.page4 { background-color: palegreen; }
.page5 { background-color: orange; }
```

上記HTML・CSSについては問題なく理解ができているのですが、
次に記載しますJSでいくつか理解できていない部分があります、、
```Javascript
(function () {
  'use strict';
  
  // 変数
  var wrap = document.getElementById('wrap'),
    elements = document.querySelectorAll('#wrap div'), // 1画面分スクロールさせる要素
    elRect = [], // 要素の位置情報を取得するための配列
    elTop = [], // 要素の位置を入れるための配列
    count = 0, // 
    wheelFlag = false;
  
  // 各要素の位置を取得
  function getElTop() {
    for (var i = 0; i < elements.length; i++) { // 要素の数ループ
      elRect.push(elements[i].getBoundingClientRect()); // 要素の位置情報を配列へ
    }
    for (var i = 0; i < elRect.length; i++) { // 要素の数ループ
      elTop.push(elRect[i].top + window.scrollY); // 要素の位置を配列へ
    }
  }
  getElTop();
  
  // 画面リサイズのときの処理
  window.addEventListener('resize', function () {
    elRect = []; // 位置情報の配列を一旦空に
    elTop = []; // 位置の配列を一旦空に
    getElTop(); // 位置を取得
    window.scrollTo(0, elTop[count]); // 現在表示中の画面位置へ
  });
  // マウスホイールのときの処理
  wrap.addEventListener('wheel', function (e) {
    e.preventDefault(); // デフォルトのスクロール動作を削除
    if (!wheelFlag) { // wheelFlagがfalseのときに発動
      wheelFlag = true; // wheelFlagをtrueにして無駄に発動しないように
      if (e.deltaY > 0) { // ホイールが下方向だったら
        if (count >= elements.length - 1) { // 要素の数以上に増えないようにcountが要素の数を超えたら
          count = elements.length - 1; // countを要素の数とする
        } else {
          count++; // それまではcountをプラス
        }
      } else if (e.deltaY < 0) { // ホイールが上方向だったら
        if (count <= 0) { // 0より小さくならないようにcountが0以下なら
          count = 0; // countを0とする
        } else {
          count--; // それまではcountをマイナスしていく
        }
      }
      setTimeout(function () { //0.8秒後にwheelFlagをfalseにして次のページめくれるように
        wheelFlag = false;
      },800);
      setTimeout(function () {
        window.scrollTo({ // count番目の要素へスクロール
          top: elTop[count],
          behavior: 'smooth',
        });
      },20); // スクロールまで時間差をつけて慣性スクロール対策
    }
  });
}());
```
### 質問させていただきたい内容
**・変数「count」について**
まず冒頭にて変数の定義をしている箇所に、
coount = 0;
という記載があるのですが、このcountという変数は一体何を指しているのでしょうか。
上記のコード内にいくつかconsole.log(count)と記述し値をとってみたところ、スクロールで画面が切り替わるたびに値が0-4の範囲で動くことが確認できました。そのため全５ページに割り振られた値なのかなと考えたのですが、冒頭以外でcountに何かの値を入れるような記述が見当たらず混乱していますT_T

**・変数「wheelFlag」について**
冒頭でfalseと設定しているwheelFlagですが、以下のようにtrueに変更する理由がよくわからず、、
これは「マウスホイールのときの処理」の発火の条件がwheelFlag=falseとなっているため、trueに変更しておけば
発火しなくなからということなのでしょうか、、？
ただ一度trueに設定してしまうと以降のマウスホイール時にはwheelFlagがtrueのままのため処理が行えなくなってしまうのではと思い、、
```Javascript
    if (!wheelFlag) { // wheelFlagがfalseのときに発動
      wheelFlag = true; // wheelFlagをtrueにして無駄に発動しないように
```

初めての質問のため、質問の仕方等不十分なところもあるかと思いますが、
何卒よろしくお願い致します。

JSで全画面スクロールを実装したい

お世話になっております。HTML、CSS初心者です。

サイトをHTMLで作成しているのですが、画像を使用したボタンを配置したのですが、
ウインドウを縮小した際に、ボタンが全て同時にうまく縮小する方法が、調べてもわからなかったので、教えていただきたいです。

イメージとしてはこのようにしたいのですが、
![![イメージ説明](49acdc3bcf3a430bb77270d26c3bbc0e.jpeg)

リストで並べると、ウインドウを縮小した際、画像が縦に並んでしまい、
positionを数値で固定すると、ウインドウ縮小時に、右端のボタンから小さくなって消えてしまいます。

同時に4つのボタンを同じ大きさで縮小したいです。

ご教授よろしくお願いいたします。

```HTML
<ul>
<li><a class="btn" href="Home.html#section1"><div class="example"><img src="Button.png"><p>ホーム</p></div></a></li>
<li><a class="btn" href="Menu.html#section1"><div class="example"><img src="Button.png"><p>体験内容</p></div></a></li>
<li><a class="btn" href="Access.html#section1"><div class="example"><img src="Button.png"><p>メニュー</p></div></a></li>
<li><a class="btn" href="News.html#section1"><div class="example"><img src="Button.png"><p>安全対策</p></div></a></li>
```
```CSS
.example { position: relative; } 
```

【CSS/HTML】ボタンを同時に縮小したい。

```html
<!DOCTYPE html>
<html lang=ja dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

    <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">
    <title>Airbnbでお家、アパート、お部屋をシェアしよう</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <header>
        <div class="header1">
          <div class="left">
            <img src="../trace img/Airbnb/Airbnb-logo.png" alt=""class="inheader1">
            <a href="index.html">概要</a>
            <a href="#">準備</a>
            <a href="">安全</a>
            <a href="#">マネープラン</a>
          </div>
          <div class="right">
            <p>予想月収</p><p>¥100,891</p>
            <div class="a">
              <a href="#" id="start">はじめる</a>
            </div>
          </div>
        </div>
        <div class="header2">
          <div class="inheader2">
            <h1>空き部屋で世界をつなごう</h1>
            <p>どのくらいの収入が見込めるかチェック</p>
            <form class="check" action="index.html" method="post">
              <input type="search" value="東京" placeholder="ロケーション">
              <br>
              <select class="selecet" name="select1">
                <option value="all" selected>まるまる貸切</option>
                <option value="alone">個室</option>
                <option value="share">シェアルーム</option>
              </select>
              <select class="select" name="select2">
                <option value="1">ゲスト１人</option>
                <option value="2">ゲスト２人</option>
                <option value="3">ゲスト３人</option>
                <option value="4" selected>ゲスト４人</option>              
              </select>
            </form>
            <p>¥236,567 <span>月あたり</span></p>
            <div class="a">
              <a href="#" id="start">はじめる</a>
            </div>
          </div>
          <div class="pattern2">
            <h1>空き部屋で世界をつなごう</h1>
          </div>
        </div>
      </header>
      <div class="main">
        <div class="p">
          <p>どのくらいの収入が見込めるかチェック</p>
        </div>
        <div class="row" id="form">
          <form class="check" action="index.html" method="post">
            <input type="search" value="東京" placeholder="ロケーション">
            <br>
            <div class="col section2">
              <select class="selecet" name="select1">
                <option value="all" selected>まるまる貸切</option>
                <option value="alone">個室</option>
                <option value="share">シェアルーム</option>
              </select>
            </div>
            <div class="col section2">
              <select class="select" name="select2">
                <option value="1">ゲスト１人</option>
                <option value="2">ゲスト２人</option>
                <option value="3">ゲスト３人</option>
                <option value="4" selected>ゲスト４人</option>
              </select>
            </div>
          </form>
        </div>
        <p>¥236,567 <span>月あたり</span></p>
          <div class="a">
            <a href="#" id="start">はじめる</a>
          </div>
        <div class="row">
          <div class="col">
            <h3>なぜAirbnbでホスト？</h3>
            <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアして、世界中の旅好きな仲間とつながれます。予約可能日から料金、ハウスルーム、ゲストとの交流頻度まで、すべて自分で決めることができます。</p>
          </div>
          <div class="col">
            <h3>困ったときも安心</h3>
            <p>万一に備えるUS$1,000,000の財産補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます</p>
          </div>
        </div>
        <hr>
        <h2>3スッテプで簡単ホスティング</h2>
        <div class="row">
          <div class="col">
            <i class="far fa-check-circle"></i>
            <h3>無料でお部屋を掲載</h3>
            <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p>
          </div>
          <div class="col">
            <i class="far fa-check-circle"></i>
            <h3>ホスティング方法を設定</h3>
            <p>ご希望のスケジュール、料金、ゲストの要件を選びます。設定の際にはヒントも表示されます。</p>
          </div>
          <div class="col">
            <i class="far fa-check-circle"></i>
            <h3>はじめてのゲストをもてなそう</h3>
            <p>リスティングが掲載され次第、条件にかなったゲストから連絡を受けとることができます。ゲストの宿泊前にご質問があればメッセージを送信できます。</p>
            <a href="">ホスティングの始め方を学ぶ</a>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="responsive">
              <i class="fas fa-quote-left"></i>
              <p>「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</p>
            </div>
            <div class="add">
              <p>Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p>
            </div>
            <div class="a_button">
              <a href="#">ホスト実践例をチェック</a>
            </div>
          </div>
          <div class="col">
            <img src="trace img/8e6c68cc-e714-4849-bad9-464abf58e84a.jpg" alt="">
          </div>
        </div>
        <hr>
        <h2>万一のときも安心です</h2>
        <div class="row">
          <div class="col section2">
            <p>大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。万一のトラブルのときには、Airbnbが全力でサポートします。建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p>
            <div class="other_a">
              <a href="#">ホストをお守りするしくみを見る</a>
            </div>
          </div>
          <div class="col section2">
            <ul>
              <li><i class="fas fa-check"></i>　予約前に政府発行の身分証明書を求める権限</li>
              <li><i class="fas fa-check"></i>　ハウスルールに同意しないと泊まれない</li>
              <li><i class="fas fa-check"></i>　過去の宿泊のレビューもばっちり読める</li>
              <li><i class="fas fa-check"></i>　財物損害は¥100,000,000まで無料で補償</li>
              <li><i class="fas fa-check"></i>　$1,000,000の賠償責任保険が無料で付帯</li>
              <li><i class="fas fa-check"></i>　２４時間３６５日対応グローバルカスタマーサポート</li>
            </ul>
          </div>
        </div>
        <div class="img">
          <img src="trace img/bb358a46-fa25-4895-b5fd-048a386bdcac.jpg" alt="">
        </div>
        <hr>
        <h2>シンプルな決済</h2>
        <div class="row">
          <div class="col section2">
            <h3>料金設定は完全に自由</h3>
            <p>料金は常に自由に選択できます。迷ったときには、域内需要に合わせて設定できるツールがあります。</p>
          </div>
          <div class="col section2">
            <h3>手数料が安い</h3>
            <p>登録に費用は一切かかりません。Airbnbは通常、予約ごとに業界で最低の均一３％をサービス料としていただいております。</p>
          </div>
          <div class="col section2">
            <h3>迅速な支払い</h3>
            <p>ゲストのチェックイン後に、Paypal、直接振込み、またはその他の利用可能な方法で受取金を送金できます。</p>
            <div class="other_a">
              <a href="#">Airbnb収入を得るまでの流れを見る</a>
            </div>
          </div>
        </div>
        <div class="row flower">
          <h2>収入を増やした<br>い？</h2>
          <div class="start2">
            <a href="#">はじめる</a>
          </div>
        </div>
      </div>
      <footer class="last">
        <hr class="last">

        <hr class="last">
        <div class="row lastfooter">
          <div class="footerlast1">
            <img src="../trace img/Airbnb/Airbnb-logo.png" alt="">
            <p>Airbnb Global Services Limited<br>
              観光庁長官（01）第s0001号（2018年6月15日-2023年6月14日）
              ©2019 Airbnb,Inc.All rights reserved.
            </p>
          </div>
          <div class="yen">
            JPY
          </div>
        </div>
      </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
```
bodyの中身をcontainerでグルッと囲むと右側に余白ができてしまいます。
container-fluidに変えると消えます。こうするとなぜ消えるのですか？

[1]container-fluidとcontainerの違いは
前者がブラウザの横幅を最大限使って描画されるのに対し、後者は閲覧者の画面サイズに応じて横幅が適宜制限されて描画されることですよね？
つまり連続的かそうでないかの違いであって、なぜそれが余白の有無に関わってしまうのですか？

[2]あと、そもそもcontainerを消し去ってもウィンドウの幅を変えるとそれに対応して表示される幅も変わります。段組もしっかりできています。
containerはなぜ必要なのでしょうか？

[3]containerはmeta name="viewport" content="width=device-width"の指定と何が違うのでしょうか？
段組ができること以外に違いはありますか？