chromeの検証のスマホ表示が15px程広く表示されてしまう。

Question

webサイトの模写をしていたのですが、指定している画面幅より15px広くなってしまいます。

    <header>
      <div class="header-in">
        <div class="title">
          <div class="logo">
            <img src="img/isaralogo.png" alt="iSara">
          </div>
          <div class="subtitle txtxs">
            <p>バンコクのノマドエンジニア育成講座</p>
          </div>
          <div class="headcontact">
            <div class="contactpc startpoint">
              <p class="texts">お問い合わせ / 資料請求はこちら</p>
            </div>
            <div class="contactsp startpoint">
              <img src="img/form.png" alt="資料請求">
              <a href="#">資料請求</a>
            </div>
          </div>
        </div>
      </div>
    </header>

header {
  position: fixed;
  z-index: 10;
  width: 100%;
  background-color: #fff;
  max-width: 100%;
}
.title {
  width: 1170px;
  max-width: calc(100% - 20px);
  height: 75px;
  margin: 0 auto;
  padding: 20px 0;
  position: relative;
}
.logo {
display: inline-block;
margin-top: -6px;
}
.logo img {
  width: 128px;
}
.subtitle {
  position: relative;
  bottom: -10px;
}
.subtitle p {
  font-weight: 600;
  margin-bottom: 0;
}
.title .logo, .subtitle {
  display: inline-block;
}
@media screen and (max-width: 780px){
header {
    height: 62px;
    
  }
  .title {
    height: 62px;
    padding: 0;
    position: relative;
    margin: 0;
  }
  .logo {
    position: absolute;
    top: 25px;
    left: 10px;
    margin-top: 0;
  }
  .logo img {
    width: 90px;
  }
  .subtitle {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .contactpc {
    display: none;
  }
  .contactsp {
    display: block;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    padding: 9px 11px;
    background-color: #da6b64;
  }
  .contactsp a, .contactsp img {
    display: block;
    margin: auto;
  }
  .contactsp img {
    width: 20px;
  }
  .contactsp a {
    font-size: 12px;

  }
}

試しにメディアクエリ内のheaderに対して

header {
max-width: calc(100% - 15px);
}

と無理やり縮めてみたところ、確かにヘッダー部分は他の要素と同じ幅になったのですが、やはり15px分のグレーの背景色が残ってしまいました。

ご協力お願いします。

Mac OS Mojave :10.14.6
chrome バージョン: 80.0.3987.149（Official Build） （64 ビット）
Visual Sutudio Code 1.42.1
を使っています。

Comments

[marlboro_tata]

<meta name="viewport">　はどんなふうに書いていますか？

[ebiryu]

<meta name="viewport" content="width=device-width,initial-scale=1">です。

[marlboro_tata]

ありがとうございます。
Mac OSのChromeで見てみたのですが、再現できませんでした。
ご利用中のOSやChromeのバージョンを追記すると良いかもしれません。質問は編集できますので、質問に追記すると良いと思います。

[marlboro_tata]

なんとなく、スクロールバーを表示する領域の計算分が、増えているようにも感じるのですが、再現できないのでちょっとわかりません。お役に立てず。。。。

[ebiryu]

ご協力ありがとうございます!!

Answer 1

Bootstrapなどでは.rowというクラスにmargin-left: -15px;とmargin-right: -15px;が指定されており、body直下に.rowがいたりする場合、変な隙間が出てしまうことがあります。

.containerの中にいる場合、そのネガティブマージン (マイナスマージン) は相殺されて変な隙間はでないようになっているのですが、似たようなことが起こっているような気がします。

CSSのソースコード内を「-15px」などで検索してみてもよさそうです。

Comments

[ebiryu]

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

ご指摘いただいた通り、.rowのネガティブマージンが悪さをしていた様で、.containerの左右paddingを自分が0にしてしまったところを本来の15pxに直したところ右側の余白は消えました。

助けていただきありがとうございました。

Answer 2

原因はheaderではなく、他のセクションにありました。

<div class="teacherbox container">
  <div class="row">
    <div class="col">

となっているところで

.teacherbox {
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
}

ここのpaddingの左右を本来bootstrapで設定されている15pxに直したところ解決しました。