bootstrapのcontainer-fluidを使うとh2がずれる

Question

既存HTMLにBootstrapを入れたらそれ以降のh2に使われているイメージがずれてしまいました。
http://spiritualcompany.net/website/test/index.html

のファイルの中の、「このダイエットメソッド5つの特徴」というところにbootstrapを適応しました。

<h2 class="kakaku">このダイエットメソッド5つの特徴</h2></br>
    
      <div class="container-fluid tokutyou5">
        <div class="row">
          <div class="col-md-6">
            <img src="img/money.jpg" alt="お金がかからない">
            <h2>特徴１．お金がかからない</h2>
            <p>
              エステやジムに行ったり、サプリメントや器具などを購入する必要がありません。もちろん私から営業することもありません。
            </p>
          </div>
          <div class="col-md-6">
            <img src="img/easy.jpg" alt="カンタン">
            <h2>特徴２．すき間時間にカンタンにできてしまう！</h2>
            <p>
              忙しくても、寝起きですっぴんでも、あなたのペースで自由に実践できます。
            </p>
        </div>
        <div class="row">
          <div class="col-md-6">
            <img src="img/smartphone.jpg" alt="スマホ">
            <h2>特徴３．スマホだけで実践できる</h2>
            <p>
              本教材はPDFなのでスマホから読むことができます。メールでのサポートなどもスマホで読めます。
            </p>
          </div>
          <div class="col-md-6">
            <img src="img/nowhow.jpg" alt="ノウハウ">
            <h2>特徴４．一生使えるノウハウを手にできる</h2>
            <p>
              本教材の内容は、一生ダイエットするためのノウハウを手にできます。どんな年代になっても美しく痩せられます。
            </p>
        </div>
        <div class="row">
          <div class="col-md-6">
            <img src="img/beauty.jpg" alt="容姿">
            <h2>特徴５．容姿が良くなります</h2>
            <p>
              このダイエットを実践していくと、血色が良く生き生きとしてくるので容姿が良くなります。
            </p>
          </div>
        </div>
      </div>

.tokutyou5{
	width: 80%;
}
.tokutyou5 img{
	width: 100%;
	margin-bottom: 20px;
	margin-top: 20px;
}

.tokutyou5 h2{
	color: #ff69b4;
	padding-bottom: 20px;	
}

するとそれ以降にあるh2に画像が使われているのですが、右側にずれてしまいました。
h2部分は、

<h2 class="midashi_18"></h2>

.midashi_18 {

	background-image: url(img/midashi_18.jpg);
	background-repeat: no-repeat;
	height: 130px;
	width: 920px;
}

bootstrapが何か悪さをするのでしょうか？他のh2もずれてしまっています。
Bootstrapは、5.0.0betaです。

Answer 1

問題の部分のHTMLをご提示いただいていないので推測ですが、ガターの影響ではないでしょうか。

ガターとは、水平方向の padding によって作られるカラムの隙間のことです。 各カラムに padding-right と padding-left を設定し、各行の最初と最後にネガティブ margin でオフセットしてコンテンツを揃えます。

Gutters (ガター) · Bootstrap v5.0

---

こうしてはいかがですか？

<h2 class="midashi_18 gx-0"></h2>

コメントを受けて追記

タグの閉じ忘れが原因です。

<h2 class="kakaku">このダイエットメソッド5つの特徴</h2></br>

      <div class="container-fluid tokutyou5">
        <div class="row">
          <div class="col-md-6">
            <img src="img/money.jpg" alt="お金がかからない">
            <h2>特徴１．お金がかからない</h2>
            <p>
              エステやジムに行ったり、サプリメントや器具などを購入する必要がありません。もちろん私から営業することもありません。
            </p>
          </div>
          <div class="col-md-6">
            <img src="img/easy.jpg" alt="カンタン">
            <h2>特徴２．すき間時間にカンタンにできてしまう！</h2>
            <p>
              忙しくても、寝起きですっぴんでも、あなたのペースで自由に実践できます。
            </p>
        </div>

        </div><!-- .row 閉じ忘れ -->

        <div class="row">
          <div class="col-md-6">
            <img src="img/smartphone.jpg" alt="スマホ">
            <h2>特徴３．スマホだけで実践できる</h2>
            <p>
              本教材はPDFなのでスマホから読むことができます。メールでのサポートなどもスマホで読めます。
            </p>
          </div>
          <div class="col-md-6">
            <img src="img/nowhow.jpg" alt="ノウハウ">
            <h2>特徴４．一生使えるノウハウを手にできる</h2>
            <p>
              本教材の内容は、一生ダイエットするためのノウハウを手にできます。どんな年代になっても美しく痩せられます。
            </p>
        </div>

        </div><!-- .row 閉じ忘れ -->

        <div class="row">
          <div class="col-md-6">
            <img src="img/beauty.jpg" alt="容姿">
            <h2>特徴５．容姿が良くなります</h2>
            <p>
              このダイエットを実践していくと、血色が良く生き生きとしてくるので容姿が良くなります。
            </p>
          </div>
        </div>
      </div>

Comments

[dobashi]

ご回答ありがとうございます。
<h2 class="midashi_18 gx-0"></h2>
にしてみたのですが、まだ右にずれたままです。

[Lhankor_Mhy]

これ以上は問題の部分のソースをご提示いただかないと厳しいと思います。

[dobashi]

bootstrapを入れた部分の前と後のはじまるスタート位置が変わっています。bootstrapのあとのh2やpのスタート位置が右にずれています。

[Lhankor_Mhy]

追記ありがとうございます。
ですが、コードがないとなんとも……

[dobashi]

bootstrapと前後の部分の問題個所です。

<div class="text_box">

<p>など、ここでは一部しか紹介できませんが、あなたがこれから先、ダイエットを卒業するために必要な方法がぎっしりと詰めこまれています。 </p>
</div>
<h2 class="kakaku">このダイエットメソッド5つの特徴</h2></br>

<div class="container-fluid tokutyou5">
<div class="row">
<div class="col-md-6">
<img src="img/money.jpg" alt="お金がかからない">
<h2>特徴１．お金がかからない</h2>
<p>
エステやジムに行ったり、サプリメントや器具などを購入する必要がありません。もちろん私から営業することもありません。
</p>
</div>
<div class="col-md-6">
<img src="img/easy.jpg" alt="カンタン">
<h2>特徴２．すき間時間にカンタンにできてしまう！</h2>
<p>
忙しくても、寝起きですっぴんでも、あなたのペースで自由に実践できます。
</p>
</div>
<div class="row">
<div class="col-md-6">
<img src="img/smartphone.jpg" alt="スマホ">
<h2>特徴３．スマホだけで実践できる</h2>
<p>
本教材はPDFなのでスマホから読むことができます。メールでのサポートなどもスマホで読めます。
</p>
</div>
<div class="col-md-6">
<img src="img/nowhow.jpg" alt="ノウハウ">
<h2>特徴４．一生使えるノウハウを手にできる</h2>
<p>
本教材の内容は、一生ダイエットするためのノウハウを手にできます。どんな年代になっても美しく痩せられます。
</p>
</div>
<div class="row">
<div class="col-md-6">
<img src="img/beauty.jpg" alt="容姿">
<h2>特徴５．容姿が良くなります</h2>
<p>
このダイエットを実践していくと、血色が良く生き生きとしてくるので容姿が良くなります。
</p>
</div>
<div class="col-md-6">

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

<h2 class="midashi_18 gx-0"></h2>

<div class="text_box">
<p>あなたの体が本来持っている基礎代謝をアップさせて、自然と痩せていく体を手に入れることが出来るでしょう。 </p>

[Lhankor_Mhy]

あ、もしかして、本文のURLのHTMLそのままですか？

[Lhankor_Mhy]

本文のURLのHTMLそのままでいいなら、タグの閉じ忘れが原因ですよ。
.rowのdivタグ、閉じてないですよね？

[dobashi]

感謝です！ありがとうございます。.rowのdivタグ閉じたら、直りました。
本当にありがとうございます。

[Lhankor_Mhy]

なかなか質問を読み取れずにお手間をおかけしてすみませんでした。

[dobashi]

いえいえ。ご丁寧にありがとうございます。

Answer 2

width: 920px;を無効にしたところ枠内に収まりました。
width: 100%;でも枠内に収まりました。
ご参考まで。

以下蛇足です。
footerにwidth:100%;
h1のimgにwidth:100%;
とすると全部綺麗に収まりますが…

Lhankor_Mhy様が提示された情報で一括処理できるのであれば、
個別にwidth:100%;する必要が無いので楽かなと思います。

Comments

[dobashi]

ご回答ありがとうございます。

width: 920px;を無効にしたり、width: 100%;にしたのですが、
右にずれたままです。

.midashi_18 {

background-image: url(img/midashi_18.jpg);
background-repeat: no-repeat;
height: 130px;
/* width: 920px; */
}

でいいのですよね？何か他にもする必要あるのでしょうか？

[退会済みユーザー]

ブラウザのキャッシュが効いてるパターンじゃないかなぁと思われます。
Ctrl+F5等でキャッシュをクリアしてから再確認していただけますでしょうか。

[dobashi]

ご回答ありがとうございます。
Ctrl+F5でキャッシュクリアにしても、ずれてます。シークレットモードにしているのでキャッシュもないかと思います。

[退会済みユーザー]

http://spiritualcompany.net/website/test/index.html
このサイトですよね？
先ほどとコードが変わってしまったようですが、
midashi_04はwidth:100%;で枠内に収まりました。

[dobashi]

ありがとうございました！
.rowのタグの閉じ忘れでした。失礼しました。

[退会済みユーザー]

無事に解決されたようで良かったです。
見た目がだいぶ綺麗だったのでその可能性を失念しておりました。
こちらこそ失礼いたしましたっ