background-colorが適用されない

bodyに対して、背景色を指定しているのですが、反映されません。
色々調べてみたのですが、floatがあったりすると、反映されない場合があるとみたのですが、それが原因でしょうか？
初心者であまりよくわかっておらず、原因の突き止めができないのでお助けいただければ嬉しいです。

HTML
1<!DTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
6	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
7  <link rel="stylesheet" href="style.css">
8  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
9	<title></title>
10</head>
11<body>
12	<header>
13		<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
14			<div class="container d-flex justify-content-between">
15			  <a class="navbar-brand" href="#">DevFolio</a>
16			  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
17			    <span class="navbar-toggler-icon"></span>
18			  </button>
19
20			  <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
21			    <ul class="navbar-nav">
22			      <li class="nav-item active">
23			        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
24			      </li>
25			      <li class="nav-item">
26			        <a class="nav-link" href="#">About</a>
27			      </li>
28				  <li class="nav-item">
29			        <a class="nav-link" href="#">Service</a>
30			      </li>
31			      <li class="nav-item">
32			        <a class="nav-link" href="#">Work</a>
33			      </li>
34			      <li class="nav-item">
35			        <a class="nav-link" href="#">Blog</a>
36			      </li>
37			      <li class="nav-item">
38			        <a class="nav-link" href="#">Contact</a>
39			      </li>
40			    </ul>
41			  </div>
42			</div>
43		</nav>
44	</header>
45
46	<main>
47		<div class="container-fluid  min-vh-100 hero d-flex justify-content-center align-items-center">
48		 <h1 class="intro-title">I am Morgan Freeman</h1>
49		</div>
50	</main>
51
52    <section id="about">
53	    <div class="container mt-5">
54			<div class="row bg-white shadow py-4">
55				<div class="col-md-6">
56					<div class="row m-md-4">
57						<div class="col-md-5">
58							<img src="sozai_bootstrap_kadai/img/testimonial-2.jpg">
59						</div>
60						<div class="col-md-7">
61							<p><span class="title-s">Name:</span>Morgan Freeman</p>
62							<p><span class="title-s">Profile:</span>full stack developer</p>
63							<p><span class="title-s">Email:</span>contact@example.com</p>
64							<p><span class="title-s">Phone:</span>(617)557-0089</p>
65						</div>
66					</div>
67				 <div class="m-md-4">
68				     <p class="title-s">Skill</p>
69					 <span>HTML</span><span class="float-right">85%</span>
70					  <div class="progress mb-3">
71					  <div class="progress-bar" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
72					  </div>
73					 <span>CSS3</span><span class="float-right">75%</span>
74					  <div class="progress mb-3">
75					  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
76					  </div>
77					 <span>PHP</span><span class="float-right">50%</span>
78					  <div class="progress mb-3">
79					  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
80					  </div>
81					 <span>JAVASCRIPT</span><span class="float-right">90%</span>
82					  <div class="progress mb-3">
83					  <div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
84					  </div>
85				 </div>
86				</div>
87				<div class="col-md-6 pt-4">
88					<h2>About me</h2>
89					<div class="line-left"></div>
90					<p class="lead mt-2">
91					 Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et,<br> 
92					 porttitor at sem. Praesent sapien massa, convallis a<br>
93					 pellentesque nec, egestas non nisi. Nulla porttitor<br>
94					 accumsan tincidunt.
95					</p>
96					<p class="lead">
97					 Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.<br>
98					 Vivamus suscipit tortor eget felis porttitor volutpat.<br>
99					 Vestibulum ac diam sit amet quam vehicula elementum<br>
100					 sed sit amet dui. porttitor at sem.
101					</p>
102					<p class="lead">
103					 Nulla porttitor accumsan tincidunt. Quisque velit nisi,<br>
104					 pretium ut lacinia in, elementum id enim. Nulla porttitor<br>
105					 accumsan tincidunt. Mauris blandit aliquet elit, eget<br>
106					 tincidunt nibh pulvinar a.
107					</p>
108				</div>
109			</div>
110		</div>
111    </section>
112
113  　<section id="Service">
114  	 <div class="container">
115  	 	<div class="text-center mt4rem mb-5 py-4">
116  	 		<h2 class="big-h2">Service</h2>
117  	 		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
118  	 		<div class="line-mf"></div>
119  	 	</div>
120  	 	<div class="row">
121  	 		<div class="col-md-4">
122  	 			<div class="service-box bg-white">
123  	 			 <span class="ico-circle mb-3"><i class="fas fa-tv fa-3x"></i></span>
124  	 			 <div class="text-center">
125  	 			 	<h3>WEB DESIGN</h3>
126  	 			 	<p>
127  	 			 	Lorem ipsum, dolor sit amet consectetur adipisicing elit.Magni adipisci eaque autem fugiat! Quia, provident vitae! Magni tempora perferendis eum non provident.
128  	 			 	</p>
129  	 			 </div>
130  	 			</div>
131  	 		</div>
132  	 		<div class="col-md-4">
133  	 			<div class="service-box bg-white">
134  	 			 <span class="ico-circle mb-3"><i class="fas fa-code fa-3x"></i></span>
135  	 			 <div class="text-center">
136  	 			 	<h3>WEB DEVELOPMENT</h3>
137  	 			 	<p>
138  	 			 	Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni adipisci eaque autem fugiat! Quia, provident vitae! Magni tempora perferendis eum non provident.
139  	 			 	</p>
140  	 			 </div>
141  	 			</div>
142  	 		</div>
143  	 		<div class="col-md-4">
144  	 			<div class="service-box bg-white">
145  	 			 <span class="ico-circle mb-3"><i class="fas fa-camera fa-3x"></i></span>
146  	 			 <div class="text-center">
147  	 			 	<h3>PHOTOGRAPHY</h3>
148  	 			 	<p>
149  	 			 	Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni adipisci eaque autem fugiat! Quia, provident vitae! Magni tempora perferendis eum non provident.
150  	 			 	</p>
151  	 			 </div>
152  	 			</div>
153  	 		</div>
154  	 		<div class="col-md-4">
155  	 			<div class="service-box bg-white">
156  	 			 <span class="ico-circle mb-3"><i class="fas fa-mobile-alt fa-3x"></i></span>
157  	 			 <div class="text-center">
158  	 			 	<h3>RESPONSIVE DESIGN</h3>
159  	 			 	<p>
160  	 			 	Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni adipisci eaque autem fugiat! Quia, provident vitae! Magni tempora perferendis eum non provident.
161  	 			 	</p>
162  	 			 </div>
163  	 			</div>
164  	 		</div>
165  	 		<div class="col-md-4">
166  	 			<div class="service-box bg-white">
167  	 			 <span class="ico-circle mb-3"><i class="fas fa-pencil-alt fa-3x"></i></span>
168  	 			 <div class="text-center">
169  	 			 	<h3>Graphic Design</h3>
170  	 			 	<p>
171  	 			 	Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni adipisci eaque autem fugiat! Quia, provident vitae! Magni tempora perferendis eum non provident.
172  	 			 	</p>
173  	 			 </div>
174  	 			</div>
175  	 		</div>
176  	 		<div class="col-md-4">
177  	 			<div class="service-box bg-white">
178  	 			 <span class="ico-circle mb-3"><i class="fas fa-chart-bar fa-3x"></i></span>
179  	 			 <div class="text-center">
180  	 			 	<h3>Marketing Services</h3>
181  	 			 	<p>
182  	 			 	Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni adipisci eaque autem fugiat! Quia, provident vitae! Magni tempora perferendis eum non provident.
183  	 			 	</p>
184  	 			 </div>
185  	 			</div>
186  	 		</div>
187
188  	 	</div>
189  	 </div>
190    </section>
191	
192
193 	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 　　　integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 　　　crossorigin="anonymous"></script>
194  	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
195</body>
196
197</html>
198

CSS
1@charset"utf-8"
2
3body {
4	background-color: #f5f5f5;
5	color: #4e4e4e;
6}
7
8a {
9	color: #4e4e4e;
10}
11
12.navbar {
13	background-color: rgba(0,0,0,.3);
14}
15
16.navbar-brand {
17	font-size: 1.6rem;
18	font-weight: bold;
19}
20
21.navbar-dark .navbar-nav .nav-link,
22.navbar-dark .navbar-nav .nav-link a,
23.navbar-dark .navbar-nav .nav-link:hover {
24	color: #fff;
25	font-size:1.05rem;
26	font-weight: 600;
27}
28
29.hero {
30	background-image: url(sozai_bootstrap_kadai/img/intro-bg.jpg);
31	background-size: cover;
32	background-attachment: fixed;
33}
34
35.intro-title {
36	color: #fff;
37	text-align: center;
38	font-size: 4.5rem;
39}
40
41.title-s {
42	font-size: 1.1rem;
43	font-weight: bold;
44}
45
46.line-left {
47	width: 80px;
48	height: 3px;
49	background-color: #0078ff;
50}
51
52.big-h2 {
53	font-weight: bold;
54	font-size: 3rem;
55}
56
57.line-mf {
58	width: 40px;
59	height: 5px;
60	background-color: #0078ff;
61	margin: 0 auto;
62}
63
64.service-box {
65	padding: 2.5rem 1.3rem;
66	border-radius: 1rem;
67	margin-bottom: 3rem;
68}
69
70.ico-circle{
71	height: 100px;
72	width: 100px;
73	border-radius: 50%;
74	margin: 0 auto;
75	padding-top: 25px;
76	text-align: center;
77	box-shadow: 0 0 0 10px #0078ff;
78	display: block;
79}
80

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

回答2件

ベストアンサー

構文チェックにかければ一発です。
終端がないですね。
@charset

投稿2021/04/26 04:13

m.ts10806

総合スコア80861

isykzk

2021/04/26 04:21

うわああほんとでした。ありがとうございます！一発でした・・汗

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

Plain
1<!DTYPE html>
2↓
3<!DOCTYPE html>

じゃないのかな、ぱっと見でおかしかったので。

投稿2021/04/26 03:45

K_3578

総合スコア1282

isykzk

2021/04/26 03:51

ご回答ありがとうございます。訂正してみたのですが、やはりだめでした。。＞＜

K_3578

2021/04/26 04:34

お、解決されたんですね。まぁそれは抜きにしてもHTML宣言間違ってたら世話無いので文法チェック機能あるエディタやらIDEやら使った方が良いっすね

isykzk

2021/04/28 02:51

文法チェック機能があるエディタなどがあるのですね・・・！探してみます。ありがとうございました！

K_3578

2021/04/28 03:01

まぁエディタ使うならVScodeとか良いんじゃないですかね？(私はIDE使ってるのでよくわからない) 拡張機能豊富ですし。他にも色々あるので調べてみてご自分に合う物探されるとよろしいかとー。それではっ

isykzk

2021/04/29 01:48

なるほど！ありがとうございます???? スクールからおすすめさているsublime textを使っていたのですが、今後はそちらも試してみようと思います！

K_3578

2021/04/30 01:46

スクールか何かで勉強されているのでしたら一応推奨の物使った方が良いと思います。ご自分で勉強される文に別のエディタ取り込んで実行するのは好きになされば良いと思いますが。私は使ったことないのですが、Sublime Textにもスペルチェック機能のプラグインとかあるみたいなのでご自分で調べて試してみて下さいなー。

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

あなたの回答