サイトの右端に余白ができてしまいます。

前提・実現したいこと

サイトを作ったのですが、ページの右端に余白ができてしまって困っています。

余白を消したいです

該当のソースコード

HTML
1<!doctype html>
2<html lang="en">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
10    <link rel="stylesheet" type="text/css" href="style.css">
11    
12    <title>Hello, world!</title>
13    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
14    <link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet">
15  </head>
16  <body data-spy="scroll" data-target="#navbarResponsive">
17
18    <!---- start home --->
19 <div id="home">
20    
21    <!--- Navigation --->
22    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
23        <a href="index.html"><p class="navbar-brand">湯川設計事務所</p></a>
24        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
25            <span class="navbar-toggler-icon"></span>
26        </button>
27
28        <div class="collapse navbar-collapse" id="navbarResponsive">
29            <ul class="navbar-nav ml-auto">
30                <li class="nav-item">
31                    <a class="nav-link" href="#home">Home</a>
32                </li>
33                <li class="nav-item">
34                    <a class="nav-link" href="#about">About</a>
35                </li>
36                <li class="nav-item">
37                    <a class="nav-link" href="#works">Works</a>
38                </li>
39                <li class="nav-item">
40                    <a class="nav-link" href="#profile">Profile</a>
41                </li>
42                <li class="nav-item">
43                    <a class="nav-link" href="#contact">Contact</a>
44                </li>
45            </ul>
46        </div>
47
48    </nav>
49
50   
51 </div>
52    <!---- end home --->
53
54
55    
56    
57
58    <!---- start works --->
59     <div id="works" class="offset">
60     
61    <div class="jumbotron container-fluid">
62        <div class="col-12 text-center">
63        <h3 class="heading">Works</h3>
64        <div class="heading-underline"></div>
65        </div>
66    <div class="row no-padding">
67
68        <div class="col-sm-4">
69            <div class="works">
70                <a href="img/box1.png" target="_blank">
71                    <img src="img/box1.png">
72                </a>
73            </div>
74        </div>
75
76        <div class="col-sm-4">
77            <div class="works">
78                <a href="img/box2.png" target="_blank">
79                    <img src="img/box2.png">
80                </a>
81            </div>
82        </div>
83
84        <div class="col-sm-4">
85            <div class="works">
86                <a href="img/box3.png" target="_blank">
87                    <img src="img/box3.png">
88                </a>
89            </div>
90        </div>
91
92        <div class="col-sm-4">
93            <div class="works">
94                <a href="img/box4.png" target="_blank">
95                    <img src="img/box4.png">
96                </a>
97            </div>
98        </div>
99
100        <div class="col-sm-4">
101            <div class="works">
102                <a href="img/box5.png" target="_blank">
103                    <img src="img/box5.png">
104                </a>
105            </div>
106        </div>
107
108        <div class="col-sm-4">
109            <div class="works">
110                <a href="img/box6.png" target="_blank">
111                    <img src="img/box6.png">
112                </a>
113            </div>
114        </div>
115
116        <div class="col-12 narrow text-center mitumori">
117                <a class="btn btn-secondary btn-md" href="url" target="_blank">今すぐ簡単見積もり</a>
118        </div>
119
120    </div><!---end row-->
121    </div><!---end jumbotron-->
122
123    </div>
124    <!---- end works --->
125
126
127   
128    
129
130    <!-- Optional JavaScript -->
131    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
132    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
133    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
134    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
135  </body>
136</html>

css
1body{
2    /*---overflow: hidden;---*/
3    color: #505962;
4    font-family: 'Noto Sans JP', sans-serif;
5}
6
7.offset:before{
8    height: 4.8rem;
9    margin-top: -4.8rem;
10    content: "";
11    display: block;
12}
13
14/*--- navbar ---*/
15
16.navbar {
17    text-transform: uppercase;
18    font-weight: 700;
19    font-size: .9rem;
20    letter-spacing: .1rem;
21    background: rgba(0, 0, 0, .6)!important;
22    margin: 0 auto;
23}
24
25.navbar-brand {
26    position: relative;
27    top: 15px;
28    left: 20px;
29    height: 3rem;
30}
31
32.navbar-nav li {
33    padding-right: .7rem;
34}
35
36.navbar-dark .navbar-nav .nav-link {
37    color: white;
38    padding-top: .8rem;
39}
40
41.navbar-dark .navbar-nav .nav-link.active,
42.navbar-dark .navbar-nav .nav-link:hover {
43    color: #1ebba3;
44}
45
46/*---slider---*/
47
48.carousel-item {
49    height: 100vh;
50    background-size: cover;
51}
52
53
54
55.carousel-caption h1 {
56    font-size: 3.8rem;
57    font-weight: 700;
58    letter-spacing: .3rem;
59    text-shadow: .1rem .1rem .8rem black;
60    padding-bottom: 1rem;
61    color: #FFFFFF;
62}
63
64.btn-flat-border {
65    height: 30px;
66    text-align: center;
67    line-height: 30px;
68    font-size: 25px;
69    padding: 0.2em 0.6em;
70    text-decoration: none;
71    text-shadow: .1rem .1rem .1rem black;
72    color: #FFFFFF;
73    border: solid 2px #FFFFFF;
74    border-radius: 3px;
75    transition: .4s;
76    margin-top: 50px;
77  }
78  
79  .btn-flat-border:hover {
80    background: #FFFFFF;
81    color: black;
82    text-shadow: none;
83  }
84
85.slider-wrapper{
86    z-index: 1;
87}
88.prevnext-btn{
89    z-index: 2;
90}
91
92.slider-doc{
93    position: relative;
94    top: 400px;
95    left: -200px;
96}
97
98/*---about---*/
99
100.narrow {
101    width: 75%;
102    margin: 0 auto;
103    padding-top: 2rem;
104}
105
106.btn-md {
107    border-width: medium;
108    border-radius: 0;
109    padding: .6rem 1.1rem;
110    text-transform: uppercase;
111    margin: 1rem;
112}
113
114.jumbotron {
115    border-radius: 0em;
116    padding: 3rem 0 2rem;
117}
118
119h3.heading {
120    font-size: 1.9rem;
121    font-weight: 700;
122    text-transform: uppercase;
123    padding-bottom: 1.9rem;
124}
125
126.heading-underline {
127    width: 3rem;
128    height: .2rem;
129    background-color: #1ebba3;
130    margin: 0 auto 2rem;
131}
132
133p.lead {
134    line-height: 40px;
135    padding-bottom: 40px;
136}
137
138div.narrow h1{
139    line-height: 90px;
140}
141
142div.narrow h2 {
143    line-height: 70px;
144    font-weight: 900;
145}
146
147/*---WORKS---*/
148
149.works img {
150    max-width: 100%;
151    transition: transform .5s ease;
152}
153
154.row.no-padding [class*=col-] {
155    padding: 0;
156}
157
158.works img:hover {
159    transform: scale(1.1);
160    cursor: zoom-in;
161}
162
163.works {
164    overflow: hidden;
165}
166
167.card {
168    margin: 2rem;
169}
170
171.mitumori {
172    margin-top: 30px;
173}
174
175/*---profile---*/
176.card-wrapper {
177    margin: 0 auto;
178    display:flex;
179  }
180
181/*---contact---*/
182
183footer {
184    background-color: #40474e;
185    color: white;
186    padding: 2rem 0 3rem;
187    margin-top: 1rem;
188}
189
190footer img {
191    height: 3rem;
192    margin: 1.5rem 0; 
193}
194
195footer a {
196    color: white;
197}
198
199footer svg.svg-inline--fa {
200    font-size: 1.6rem;
201    margin: 1.2rem .5rem 0 0;
202}　
203
204footer svg.svg-inline--fa:hover {
205    color: #1ebba3;
206}
207
208hr.socket {
209    border-top: .2rem solid #666b71;
210    width: 100%;
211}
212
213.contact-info{
214    text-align: center;
215}
216
217hr {
218    width: 100%;
219}
220
221.contact-name{
222    padding-top: 10px;
223}
224
225/*---media queries---*/
226
227@media (max-width: 767px) {
228    .carousel-caption h1 {
229        font-size: 2.3rem;
230        letter-spacing: .1rem;
231        padding-bottom: .5rem;
232    }
233    
234    .carousel-caption h3 {
235        font-size: 1.2rem;
236        padding-bottom: 1.1rem;
237    }
238    
239    .btn-lg {
240        font-size: 1rem;
241    }
242
243    .narrow h1 {
244        font-size: 1.5rem;
245    }
246
247    p.lead {
248        font-size: 1rem;
249    }
250}

試したこと

CSSを見直したのですが、原因は分かりませんでした。

hope_mucci

2020/07/22 15:36

windows10:chrome,firefoxで試してみましたが右端に余白が出るような現象は確認できませんでした。質問文提示のコードで現象が再現されるか、質問者さんのほうでもう一度確認してください。

RyoYo

2020/07/23 02:49

やはり、余白が出てしまいます。余白が出るというより、右に5mmほどスクロールできてしまうといった方が正しいかもしれません。よかったら、確認お願いします。

hope_mucci

2020/07/23 02:57

使っている画像が原因ではありませんか？画像はあなた以外取得できないので画像が原因ならこちら側で現象が再現できません。 imgタグに想定するheight,widthを設定するか、https://dummyimage.com/などのダミーイメージを設定したソースを提示してください。

RyoYo

2020/07/23 05:04

なるほど！！画像はいずれも1280px×1280pxです。（提示して頂いたサイトでは、大きすぎて再現できませんでした。）

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

回答1件

ベストアンサー

bootstrapのグリッドシステムはcontainerとrowの間で独自のmarginとpaddingを設定しています。
詳しくはこの記事が分かりやすいと思うのでご覧ください。
しかし、質問中で設定されているjumbotronがこのmarginとpaddingに干渉してrowのネガティブマージンを表示させてしまっています。これが右端の余白の正体です。

これを解消するには、jumbotronとcontainerクラスを同じdiv要素に設定するのではなく、

jumbotronの内側にcontainerクラスのdiv要素を作る
グリッドシステムはこのcontainerの中に入れる

とすれば良いです。

diff
1-    <div class="jumbotron container-fluid">
2+    <div class="jumbotron jumbotron-fluid">
3+    <div class="container-fluid">
4        <div class="col-12 text-center">
5        <h3 class="heading">Works</h3>
6        <div class="heading-underline"></div>
7        </div>
8    <div class="row no-padding">
9（以下略）
10+    </div>