横揺れのカタカタする原因がわかりません

前提・実現したいこと

現在、テストサイトでサイト制作中なのですが、
http://test.second-order.jp/

Bootstrapを使用したコーディングをしていまして、
トップページがカタカタと横揺れがします。

<div>の閉じ忘れなのか全チェックしましたが、閉じ忘れはなさそうでした。 rowを何箇所かで使っているのですが、これが原因かと思っていますが、最終的な解決に至っておりません。

試したこと

開発者ツールの
row
margin-right: -15px;
margin-left: -15px;

こちらを強引に
margin-right: 0px;
margin-left: 0px;

にしたら横揺れがなくなりますが
解決には至っていません。

kyoya0819

2019/11/17 21:35

カタカタはパソコンで、ですか？

kyoya0819

2019/11/17 22:25

Windows10 Pro 1909 + Chrome 78.0.3904.97では提示のURLで「カタカタ」は再現されませんでした。

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

回答1件

ベストアンサー

まず、 #contact1, #staff に .container-fluid クラスを付与します。

HTML
1<div id="contact1" class="container-fluid">
2  <div class="row">省略</div>
3</div>
4
5<div id="staff" class="container-fluid">
6  <div class="row">省略</div>
7</div>

次に、以下の要素に対する CSS 宣言を以下のように変更します。これらを行うことにより、質問者さんの問題は解決されると思います。

#contact1 {
    background: #fff;
}

#about2 .about-text {
    padding-top: 100px;
    padding-bottom: 100px;
}

#task .about-text {
    padding-top: 100px;
    padding-bottom: 100px;
}

#news1 .news-text {
    padding-top: 100px;
    padding-bottom: 100px;
}

投稿2019/11/17 23:47