Bootstarap4でcontainerの幅が狭くなった

Botostrapを使ってサイトを作成しているのですが、レスポンシブに対応させようとmdやlgなどを使っていたらcontainerの横幅が急に狭くなりました。レスポンシブに対応させる前まで戻したのですが直りません。
解決策を教えていただきたいです。

以下ソースコードです

HTML
1<!doctype html>
2<html lang="ja">
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    <title></title>
12  </head>
13  <body>
14    <div class="container-fluid container-1">
15    	<div class="row">
16    		<img src="img/image_03.png" alt="" class="col-2 logo">
17            <div class="col-6"></div>
18    		<a href="https://colors-fiji.jp/consulting" class="col-4 top-a">
19    			<img src="img/image_06.png" class="top-contact" alt="">
20    		</a>
21    	</div>
22    	<div class="container">
23            <div class="row">
24                <img class="col-lg-12" src="img/image_11.png" alt="">
25            </div>
26            <div class="row">
27                <img class="col-12" src="img/image_14.png" alt="">
28            </div>
29    	</div>
30    </div>
31    <div class="container-fluid container-2">
32        <div class="container">
33            <div class="row">
34                <img src="img/image_18.png" alt="" class="col-6 offset-3">
35            </div>
36            <div class="row">
37                <img src="img/image_22.png" alt="" class="col-12 mt-5">
38                <div class="col-12">
39                    <p class="ml-5"></p>
40                </div>
41            </div>
42            <div class="row">
43                <img src="img/image_25.png" alt="" class="col-12 mt-5">
44                <div class="col-12">
45                    <p class="ml-5 mb-0"></p>
46                </div>
47            </div>
48            <div class="row">
49                <img src="img/image_28.png" alt="" class="col-12 mt-5">
50                <div class="col-12">
51                    <p class="ml-5 mb-5"></p>
52                </div>
53            </div>
54        </div>
55    </div>
56    ・・・
57    <div class="contanier-fluid container-9">
58        <div class="container py-4">
59            <div class="row my-5">
60                <div class="col-10 offset-1 course">
61                    <p class="mb-0">
62                        
63                    </p>
64                </div>
65            </div>
66            <div class="row my-3">
67                <a href="https://colors-fiji.jp/course" title="" class="col-8 offset-2 px-3">
68                    <img src="img/image_107.png" alt="" class="col-12">
69                </a>
70            </div>
71            <div class="row">
72                <a href="https://colors-fiji.jp/consulting" title="" class="col-8 offset-2 px-3">
73                    <img src="img/image_110.png" alt="" class="col-12">
74                </a>
75            </div>
76        </div>
77    </div>
78    <div class="container-fluid container-10">
79        <div class="container">
80            <div class="row my-5">
81                <a href="https://line.me/R/ti/p/%40colorsfiji" title="" class="col-10 offset-1">
82                    <img src="img/image_114.png" alt="" class="col-12">
83                </a>
84            </div>
85        </div>
86    </div>
87    <footer>
88        <p class="mb-0">Copyright © colors All Right Reserved.</p>
89    </footer>
90    <!-- Optional JavaScript -->
91    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
92    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
93    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
94    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
95  </body>
96</html>

CSS
1*{
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7p{
8	font-size: 2rem;
9	font-style: serif;
10}
11
12
13.container-fluid{
14	background-repeat: no-repeat;
15	background-size: cover;
16}
17
18.container{
19	width: 90%!important;
20}
21
22.container-1{
23	background-image: url('img/bg_03.png');
24	height: auto;
25	background-position: top;
26}
27
28.top-a{
29	padding-top: 1vh;
30}
31
32.top-contact{
33	width: 100%;
34}
35
36.container-2{
37	background-image: url('img/bg_06.png');
38	margin-top: -30vh;
39	padding-top: 40vh;
40}
41
42.date{
43	font-size: 1.2rem;
44}
45
46.container-3{
47	background-image: url('img/bg_08.png');
48}
49
50.syounin{
51	text-align: center;
52}
53
54.container-4{
55	background-image: url('img/bg_10.png');
56}
57
58.tac{
59	text-align: center;
60}
61
62.container-5{
63	background-image: url('img/bg_13.jpg');
64}
65
66.container-5 p{
67	color: #004eb7;
68	font-size: 2.6rem;
69	font-weight: 800;
70}
71
72.small{
73	font-size: 2.1rem;
74	font-weight: 800;
75}
76
77.kakko{
78	font-size: 2rem!important;
79}
80
81.container-6{
82	background-image: url('img/bg_16.jpg');
83}
84
85.questions{
86	text-align: center;
87	font-size: 4rem;
88	color: #004cb6;
89	font-weight: 700;
90}
91
92.question,.answer{
93	font-size: 3rem;
94	color: white;
95}
96
97.question{
98	width: 5vw;
99	height: 6.5vh;
100	background-color: #004bb6;
101	line-height: 6.5vh;
102}
103
104.borders{
105	border:solid 4px blue;
106}
107
108.answer{
109	position: absolute;
110	width: 5vw;
111    top: 0;
112    bottom: 0;
113	background-color: #45a2e7;
114}
115
116.ans-col{
117	position: relative;
118}
119
120.section{
121	border-bottom:solid 3px #dcdcdc;
122}
123
124.bold{
125	font-weight: 600;
126}
127
128.container-8{
129	background-image: url('img/bg_20.png');
130}
131
132.add{
133	border:solid 4px #0068da;
134	border-radius: 50px;
135	text-align: center;
136}
137
138.add p{
139	font-size: 1.6rem;
140	color: #0068da;
141	font-weight: 700;
142}
143
144.container-9{
145	background-color: #0076dc;
146}
147
148.course{
149	border:solid 4px #fff000;
150	border-radius: 50px;
151	text-align: center;
152}
153
154.course p{
155	font-size: 4rem;
156	color: #fff000;
157}
158
159footer{
160	background-color: #0033b8;
161	text-align: center;
162}
163
164footer p{
165	font-size: 1.5rem;
166	color: white;
167}
168
169

m.ts10806

2021/02/07 10:49

「狭く」とだけありましても、前後比較がないとどの方向性でアドバイスしたら良いのか他者には判断つかないと思います。「前に戻したい」と書いても伝わるので、目標を具体的に提示してください。

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

回答1件

container-fluidが、contanier-fluidになってますね(container-9の箇所)。

あと、せっかくcontainer-fluidを使っても、その中にcontainerがあるので、幅が思ったように伸びないんだと思います。

どちらもBootstrapのCSSクラスです。幅を段階的に伸び縮みさせたいときはcontainerを使い、小刻みに伸び縮みさせたいときはcontainer-fluidを使う、って感じで使い分けましょう。

(コメントを受けて)追記

.containerにwidth: 90%!important;を設定してるのに、期待より狭くなってしまうのは、Bootstrapが.containerに対してmax-widthを設定しているせいだと思います(例えば、lgサイズの場合、max-width:960px)。
https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

これに勝つには、max-width:none !important;などと指定すれば良さそうですが、そうなると、何のためにcontainerクラスを使うのか分からなくなってきますね。widthをパーセント指定して、max-widthなし、というのは、もはやcontainer-fluidに近いので。

投稿2021/02/07 11:04

編集2021/02/07 12:36

gpsoft

総合スコア1323

programist

2021/02/07 11:54

回答ありがとうございます。このように使った意図としてはcontainer-fluidで全画面で背景を表示させて、文字や画像はcontainerの幅で収めたいと思って記述したのですが、paddingなどで調整してやった方がいいのでしょうか？

gpsoft

2021/02/07 12:16

すみません、ちゃんと意図を持って使っているなら問題ないです。「文字や画像はcontainerの幅で収めたい」とのことですが、この「containerの幅」を`width:90%`にしたつもりなのに、期待より狭くなる、というのが元々の質問の主旨ってことですかね。回答を編集してみます。

programist

2021/02/07 12:30

「containerの幅」を`width:90%`にしたつもりなのに、期待より狭くなる、というのが元々の質問の主旨ってことですかね。 →仰る通りです。この`width:90%`幅が狭まったままなので実験的に入れてみたまです。

programist

2021/02/07 12:33

別のファイル名でHTMLをコピペしてやってみたら上手く戻りました、、、 index.htmlで作っていてそれを一度消してもう一度index.htmlを作り直したところさっきと全く変わらずに幅が狭いままです。謎です、、、補足としましては幅の狭さはPCサイズに直してもスマートフォンのような幅のままで、背景画像はPCサイズに戻っています。あと、font-sizeをremで指定したところも大きさがめちゃくちゃになっています。パソコンを再起動してみましたが変化はありませんでした。

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