スマホのサイトで一部コンテンツが横にオーバーフローしてしまう

前提・実現したいこと

サイトを運営している者です。

スマホ画面での示するとき、画面がわずかに横にスクロールされてしまいます。(タブレットは問題ないようです)

どうやらclassのcontainerが悪さをしているようなのですがどう直せばいいかわからず行き詰っています

よろしくお願いします。

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

FireFoxのF12で見てみたところ、<div class="container"> [オーバーフロー]と出ています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>サイト</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow,noarchive" />

  <link rel="stylesheet" href="../css/bootstrap.css">
  <link rel="stylesheet" href="../css/fuwaimg.css">
  <link rel="stylesheet" href="../css/style.css">
<script src="../js/jquery.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script type="text/javascript" src="../js/openclose.js"></script>
</head>


<body>
<div id="container">

	<header>
    <div class="container wrapper">

        <a href="../index.html"><img src="../img/logo.png" alt="サイト"></a>

    </div> <!-- end container -->
  </header>

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


		<div class="col-12" id="headernav">

		<nav>
		<ul>
		<li><a href="../index.html">home</a></li>
		<li><a href="../about.html">about</a></li>
		<li><a href="../gallery.html">gallery</a></li>
		<li><a href="../radio.html">radio</a></li>
        <li><a href="../ranking.html">ranking</a></li>
		<li><a href="../items.html">items</a></li>
		</ul>

		</nav>

		</div>

<section id=comics>
	<center>
	<h1>漫画タイトル</h1>
<section id=note>
<p>キャプションです。</p>
</section>


<img src="１.png" vspace="10" alt="１">

<img src="２.png" vspace="10" alt="２">

<img src="３.png" vspace="10" alt="３">

<img src="４.png" vspace="10" alt="４">

<img src="５.png" vspace="10" alt="５">

</center>

</section>

</div>
<!--/row-->

</div>
<!--/container-->

</div>
<!--/container-->

  <footer>
    <div class="container">
      <small>Copyright&copy; <a href="../index.html">サイト</a> All Rights Reserved.</small>
      <p class="template"><a href="https://do.gt-gt.org/" target="_blank">template by do.</a></p>
    </div>
  </footer>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="../koibumi_app/koibumi.js"></script>

</body>
</html>

CSS

@charset "UTF-8";

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

/* ==========================================
  以下、デザインを決める記述です
   ========================================== */
body {
  background-size: auto auto;
  background-color: #f9f9f9;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, #eaeaea 4px, #eaeaea 5px);
  /* 以上の3行が背景のストライプです。
     background-colorがベース色、background-imageが縞の色を制御しています。
     ストライプの色や太さを変えたい場合は、
     https://css-stripe-generator.firebaseapp.com/　で作ったCSSを上書きするといいです。
   */
  font-family: YuGothic,'Yu Gothic','TsukuBRdGothic-Regular','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Cambria Math','Avenir',sans-serif;
}


.container {
  background: #fff;
  /* コンテンツの背景色 */
}

@media (max-width: 575px) {
  p,
  ul {
    padding-left: 10px;
    padding-right: 10px;
  }
}

img {
  max-width: 100%;
}

img + img {
  margin-left: 5px;
}

header img.heroimg {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 400px;
}

@media (max-width: 575px) {
  header img.heroimg {
    height: 200px;
  }
  header h1 {
    font-size: 150%;
  }
  header p {
    font-size: 12px;
  }
}

header .container {
  padding: 0;
}

header .wrapper {
  position: relative;
}

header .wrapper .inner {
  position: absolute;
  top: 5%;
  margin-left: 5%;
}

header h1,
header p {
  color: #5264CC;
  padding: 0;
  -webkit-filter: drop-shadow(0 0 4px #c0c5cf);
          filter: drop-shadow(0 0 4px #c0c5cf);
}

#text header img.heroimg {
  height: 50px;
}

.page {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  width: 90%;
  margin: 30px auto;
}

.page a {
  display: block;
  /* ここから背景のストライプ */
  background-size: auto auto;
  background-color: white;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, #e2e2e2 2px, #e2e2e2 3px);
  /* ここまで背景のストライプ */
  color: #333;
  padding: 3px 10px;
}

#note p{
	font-family: sans-serif;
	color: black;
	font-size: 100%;
	/*border: 5px solid;
	border-color: black;
	border-radius: 10px;*/
	padding: 10px;
}

/*漫画レイアウト*/
#comics {
  margin-left: auto;
  margin-right: auto;
  text-align:
}

試したこと

max-widthを試しましたがあれは画像でないと意味がなさそうですね？

それからoverflowは根本的には解決しないことがわかりました。

recal

2021/12/19 07:58

>スマホ画面での示するとき、画面がわずかに横にスクロールされてしまいます。(タブレットは問題ないようです) 横スクロールが出た端末とOSとブラウザはなんですか？また問題の無かったタブレットとOSとブラウザはなんですか？ iPhone12promaxのchromeで共有されたソースを表示した際には横スクロールは発生しませんでした。提示されたソース(画像等無し)だけで横スクロールが発生する確認はできましたか？それとcenterタグは廃止されてるので使わない方がいいと思います。

退会済みユーザー

2021/12/19 08:26

横スクロールが出たのはAndroid10 FireFox最新版です問題がなかったタブレットはiPadで同じくFireFoxです画像なしでも横スクロールが起こるようです

hatena19

2021/12/19 09:00

bootstrap を導入しているようですが、バージョンはなんでしょうか。あと、今回の質問内容とは関係ないと思いますが、 jQuery をHeaderで <script src="../js/jquery.js"></script> と読み込んで、さらにbodyの最後でも読み込んでいますが、 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> どちらか一方だけにした方がいいでしょう。

退会済みユーザー

2021/12/19 13:09

2.0.1です

Lhankor_Mhy

2021/12/20 05:10

「FireFoxのF12で見てみたところ、<div class="container"> [オーバーフロー]と出ています」とのことですが、それはPC版のことではないのかな、と思うのですが、PC版でも同じ現象が確認できるのでしょうか？

退会済みユーザー

2021/12/20 05:13

PC版では横スクロールはできず、正常な状態です

Lhankor_Mhy

2021/12/20 05:38

なるほど。そうだとすると、Firefoxの開発者ツールはスクロールが発生すると「オーバーフロー」と表示するので、そこが原因だとは限らないと思います。ところで、PC版のFirefoxの「レスポンシブデザインモード」ですと同じ現象は起きますか？

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

回答2件

ベストアンサー

bootstrapをロードさせなかったところ大幅に改善し、余った<body>の部分はoverflow-x: hidden;で隠しました。

投稿2021/12/23 03:59

退会済みユーザー

総合スコア0

2.0.1です

Bootstrap 2.0.1 のドキュメントを見る限り、このバージョンはbootstrap.min.cssの他にbootstrap-responsive.min.cssを読み込む必要がありそうです。
Bootstrap, from Twitter 2.0.1 Documentation - BootstrapDocs

いずれにせよ、このような古いバージョン（2012年リリースなので10年前）を使う必要はないと思いますので、特に理由がないのであれば（できれば理由があったとしても）バージョン5の採用を検討してみてください。

投稿2021/12/23 03:02

Lhankor_Mhy

総合スコア36138