画面幅以上に要素が広がってしまいます

headerの中に背景画像を実装していますが、ブラウザ幅以上に要素が広がってしまいます。
background-size: cover;を使用しているのになぜブラウザ幅よりも広くなるのでしょうか。
また、解決策も教えていただけると幸いです。

HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="common/style.css">
    <title>花屋</title>
  </head>
  <body>
    <header>
      <div class="wrapper">
        <div class="header-nav">
          <div class="header-nav-wrapper">
            <h1>Shiro</h1>
            <div class="hamburger-menu"><span class="hamburger-line"></span></div>
          </div>
        </div>
        <h2>Shiro</h2>
        <h3>White flower shop</h3>
      </div>
    </header>
    <main>
      <div class="wrapper">
        <section id="concept">
          <h2>Concept</h2>
          <p>私たちShiroは、白いお花だけを取り扱うフラワーショップです。<br>
             色とりどりの花束も素敵だけれど、洗礼された「白」の美しさを感じてほしい。<br>
             「白」に対する愛から生まれた静寂な時間が流れる店へ、ぜひお越しください。
          </p>
          <img src="images/concept.png" alt="カスミソウの写真" width="960px" height="400">
        </section>
        <section id="work">
          <h2>Work</h2>
          <p class="work-desc">オーダーメイドでのブーケ・アレンジメントのデザインのほか、<br>
             ウェディングやイベントの装花なども行なっています。<br>
             一人一人にあったご提案をさせていただきます。
          </p>
          <div class="work-detail">
            <div class="work-detail-left">
              <img class="gift-image" src="images/work_gift.png" alt="">
              <h3>Gift</h3>
              <p>花束をお送りしたいお相手、伝えたいお気持ちに合わせたプレゼント用花束のアレンジメントをさせていただきます。花言葉などの豆知識もお伝えします。</p>
              <img class="under-image" src="images/work_wedding.png" alt="">
              <h3>Wedding</h3>
              <p>ウエディングドレスに合わせたブーケや式場の雰囲気に合う装花をご提案。お打ち合わせの流れや回数、費用などにつきましてはお問い合わせください。</p>
            </div>
            <div class="work-detail-right">
              <img class="dec-image" src="images/work_decoretion.png" alt="">
              <h3>Decoration</h3>
              <p>お写真を彩るお花を一輪から販売。一定期間のご契約で定期的にご自宅へ配送させていただくことも可能です。</p>
              <img class="under-image" src="images/work_for_yourself.png" alt="">
              <h3>For yourselg</h3>
              <p>お部屋の雰囲気やライフスタイルをお聞きしてご自宅用の花束をご提案し、少しでも長く咲かせるコツもお教えします。花束に合った花瓶をご提案することも可能です。</p>
            </div>
          </div>
        </section>
        <section id="florist">
          <h2>Florist</h2>
          <p>Shiro専属のフローリストたちをご紹介。<br>
             得意の分野であなたのオーダーを最大限に叶えます。
          </p>
          <div class="florist-intro">
            <div class="florist-detail">
              <img src="images/florist_shiyu.png" alt="">
              <p class="human">Shiyu</p>
              <p class="human-detail">お花茶屋大学フラワーアレンジメント科を卒業後、さまざまな白い花を探すために世界を一周し、Shiroの創業者となる。</p>
            </div>
            <div class="florist-detail">
              <img src="images/florist_mao.png" alt="">
              <p class="human">Mao</p>
              <p class="human-detail">花の魅力に惹かれ、空間デザインの世界からフローリストの道を歩む。主に結婚式やイベントで使用するお花のディレクション担当。</p>
            </div>
            <div class="florist-detail">
              <img src="images/florist_omichan.png" alt="">
              <p class="human">Omichan</p>
              <p class="human-detail">フローリスト兼ガーデナーという特殊な経歴をもつ。豊富な知識と技術でお客様のオーダーを叶える</p>
            </div>
          </div>
        </section>
        <section id="shop-infomation">
          <h2>Shop infomation</h2>
          <p>Shiroの店舗情報をご紹介します。</p>
          <div class="shop-flex">
            <div class="shop-info-left">
              <img src="images/shop_information.png" alt="">
            </div>
            <div class="shop-info-right">
              <table>
                <tr class="address">
                  <th>住所</th>
                  <td>〒810-0001<br>
                      福岡県福岡市中央区天神0-0-0
                  </td>
                </tr>
                <tr class="tel">
                  <th>電話番号</th>
                  <td>0120-000-000</td>
                </tr>
                <tr class="time">
                  <th>営業時間</th>
                  <td>11:00-20:30<br>
                  （定休日：水曜日）
                </td>
                </tr>
                <tr class="access">
                  <th>アクセス</th>
                  <td>天神駅12a出口から徒歩6分<br>
                      東京駅8b出口から徒歩12分
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </section>
      </div>

    </main>
    <section class="contact-us">
      <div class="bg-mask">
        <div class="wrapper">
          <h2 class="contact-title">Contact us</h2>
          <p>イベントや結婚式でご利用する装花のご相談や、<br>
            フラワーアレンジメントのご予約などはこちらからお問い合わせください。</p>
            <div class="contact-background">
              <div class="mail icon"></div>
              <p>お問い合わせ</p>
            </div>
        </div>
      </div>
    </section>
    <footer>
      <small>Copyrigth &copy; Shiro All Rights Reserved.</small>
    </footer>
  </body>
</html>

CSS

body {
  margin: 0;
  color: #2b2b2b;
}

h1, h2, h3, p {
  margin: 0;
  padding: 0;
}

a {
  color: #2b2b2b;
  text-decoration: none;
}
section {
  text-align: center;
}
.wrapper {
  max-width: 960px;
  margin: 0 auto;
  /* position: relative; */
}
header {
  background-image: url("../images/header.png");
  height: 620px;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  color: #ffffff;
  width: 100%;
  position: relative;
  display: block;
}
.header-nav {
  padding-top: 40px;
  width: 100%;
  height: 64px;
}
.header-nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hamburger-menu {
  position: relative;
  width: 32px;
  height: 64px;
  cursor: pointer;
}
.hamburger-line,
.hamburger-line::before,
.hamburger-line::after {
  position: absolute;
  left: 0;
  display: block;
  width: 32px;
  height: 1px;
  background: #ffffff;
}
.hamburger-line::before,
.hamburger-line::after {
  content: "";
}
.hamburger-line {
  top: 50%;
}
.hamburger-line::before {
  top: calc(50% - 9px);
}
.hamburger-line::after {
  top: calc(50% + 8px);
}
header h1 {
  font-size: 36px;
}
header h2 {
  font-size: 120px;
  padding-top: 240px;
  font-weight: normal;
}
header h3 {
  font-size: 16px;
  font-weight: normal;
  word-spacing: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

header h3:before, header h3:after {
  border-top: 1px solid;
  content: "";
  width: 12px;
  height: 2px;
}
header h3:before {
  margin-right: 8px;
}
header h3:after {
  margin-left: 8px;
}

kozuchi

2021/01/09 08:22

background-size: cover;　ですと、背景画像はブラウザの表示領域幅いっぱいに引き延ばされるはずですが、「ブラウザ幅以上に要素が広がって」いるというのは、背景画像の左右が見切れているということでしょうか？

abrt29

2021/01/09 08:29

そういうことです...画面が縦にも横にもスクロールできてしまう状態です。もしかしたらその背景画像が問題ではないのかもしれませんが、ブラウザで確認するとそれが一番初めに目に止まったので( T_T)

kozuchi

2021/01/09 11:14

縦にスクロールできるのは、単純に、ページの内容が表示域に収まりきらないからだと思います。幅方向にスクロールされるのは、自分が chrome で試した範囲では、背景に指定した画像の実ピクセル幅よりも、ブラウザの表示域の幅が狭い場合はそういう挙動になるようですが（つまり、広がっているというより、等幅以上には狭めてくれない）

abrt29

2021/01/09 12:14

画像サイズがブラウザ幅よりも大きいということですか？

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

回答1件

自己解決

再起動後、もう一度Chromeブラウザで確認したところ正常に表示されました。kozuchiさん、ご丁寧にありがとうございました！！

投稿2021/01/09 15:44

abrt29

総合スコア12

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

画面幅以上に要素が広がってしまいます

関連した質問