pxは合っているが大きさが違う

前提・実現したいこと

https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1585657995_NDU5YzMzMzYzNWU3
こちらのサイトの模写を行っています。
自分自身始めたばかりなので初歩的な問題であるかもしれませんがお願いします。

発生している問題・エラーメッセージ

デベロッパーツールで調べると模写サイトと同じpxになっているのに画面に表示される大きさが違います

該当のソースコード

html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>はじめてのBootstrap4</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <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">
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div class="container-fluid top" style="background-image:url(" https://a0.muscache.com/4ea/air/v2/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg?t=r:w1440-h960-sfit,e:fwebp-c75")">

  </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>
  <div class="top">
    <div class="top-1 mx-auto">
      <div class="quote-bg">
        <div class="quote">
          <h1>Airbnbホストになって、暮らしをレベルアップ</h1>
          <p>宿泊施設の内容を記入</p>
          <input value="東京">
          <div class="pulldown">
            <select name="大きさ" class="pulldown-1">
              <option>まるまる貸切</option>
              <option>個室</option>
              <option>シェアルーム</option>
            </select>
            <select name="人数" class="puldown-2">
              <option>ゲスト1人</option>
              <option>ゲスト2人</option>
              <option>ゲスト3人</option>
              <option>ゲスト4人</option>
              <option>ゲスト5人</option>
              <option>ゲスト6人</option>
              <option>ゲスト7人</option>
              <option>ゲスト8人</option>
              <option>ゲスト9人</option>
              <option>ゲスト10人</option>
              <option>ゲスト11人</option>
              <option>ゲスト12人</option>
              <option>ゲスト13人</option>
              <option>ゲスト14人</option>
              <option>ゲスト15人</option>
              <option>ゲスト16人</option>
            </select>
          </div>
         <button type="submit" >はじめる</button>

        </div>
      </div>
    </div>
  </div>
</body>

</html>




 css
*{
  box-sizing: border-box;
}
.top{
  display: block;
}
.top-1{

  max-width: 1600px;
  margin: auto 0 ;
  position: relative;
  background-image:   linear-gradient(transparent,transparent,rgba(0,0,0,0.3),rgba(0,0,0,0.6)), url("https://a0.muscache.com/4ea/air/v2/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg?t=r:w1440-h960-sfit,e:fwebp-c75");
  width:100%;
  height:600px;
  background-size: cover;
  background-repeat: no-repeat;
}

.quote-bg{

  background-color: white;
  padding:32px;
  position: absolute;
  top:78px;
  right:92px;
  border-radius: 4px;
}
 .quote{
   box-sizing:inherit;
  width:396px;
  height: 359px;

}

 .quote h1{
  font-size: 40px;
  line-height: 40px;
  color:#333333;
  font-weight: 800;
  letter-spacing: -0.6px;
  height:120px;

}
 .quote p{
  font-size: 16px;
  height: 22px;
  font-weight: 600;
  margin-top: 24px;
}
.quote input{
  width: 100%;
  line-height: 24px;
  padding: 11px;
  border: 1px solid rgba(72,72,72,0.2);
  border-radius:4px;
  margin-bottom: 8px;

}
.pulldown{
  display: flex;

}
.pulldown select{
  padding: 11px;
  padding-right: 40px;
  border-radius: 4px;
  border: 1px solid rgba(72,72,72,0.2);
}
.pulldown-1{
  width:222.328px;
  margin-right:16px;

}
.pulldown-2{
  width:153.656px;
}
.quote button{
  background-color: rgb(255,90,95);
  border:none;
  width:100%;
  padding: 10px 24px;
  font-size:16px;
  color:white;
  border-radius: 4px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 20px;

}

試したこと

補足情報（FW/ツールのバージョンなど）

画像を追加しました
上が参考元下が自分の模写したものとなります

kei344

2020/05/02 04:45

（質問文は編集できます）参考にしているページと模写したページのスクリーンショットを追記してみてください。

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

回答3件

フォントの種類が違うからではないですか？

投稿2020/05/01 11:30

退会済みユーザー

総合スコア0

shiro15

2020/05/02 04:14

自分の説明不足ですいません。文字の大きさではなく自分のhtmlでいうところのとtop-1の要素全体を模写先の大きさ1600×600 に合わせたはずなのですが画面に表示されたのが模写先より大きく表示されてしまいました。

退会済みユーザー

2020/05/02 04:40

すみません、勝手にフォントの箇所だと思ってました^^; とはいえ、提示のコードと参考サイトでtop-1のサイズに差はないかなと。ただ、参考サイトはブラウザ幅によってレイアウトやサイズを変更しているので、「1028pxよりブラウザ幅が大きい時」には差はないです。それ未満の場合も合わせるのであれば@mediaを使ってブラウザ幅ごとに指定する必要があるかなと。

shiro15

2020/05/02 05:37 編集

いえいえ画像の追加を行いました。確認してもらった通りｐｘに差はないのになぜこのような違いが生まれるのかがわかりません。レスポンシブ対応はこの後しようと思っています。

shiro15

2020/05/02 06:02

解決することができました自分の初歩的なミスによるものでした

退会済みユーザー

2020/05/02 06:20

画面のズーム機能が原因だったのですね。解決してよかったです^^ ご丁寧にコメント下さりありがとうございます。

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