safariで表示できるhtmlファイルがchromeで開くと画像、CSSが反映されない

プログラミング初学者です。HTML CSSコーディングをsafariで確認していてchromeでも同じような作業をしようと思ったのですが、chromeで画像と画像とCSSが反映されません。これはどのようなことが原因でしょうか。

HTML
コード
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8">
	<meta content="ie=edge" http-equiv="x-ua-compatible">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>Foundation Starter Template</title>
	<link href="portforio.scss" rel="stylesheet"><!-- CSS only -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"><!-- JavaScript Bundle with Popper -->

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js">
	</script>
</head>
<body>
	<header>
		<div class="container">
			<div class="row">
				<div class="col-sm-6 myName">
					<a href="">MIKE INGHAM DESIGN</a>
				</div>
				<div class="col-sm-6 homeMenu">
					<ul>
						<li>
							<a href="">HOME</a>
						</li>
						<li>
							<a href="">ABOUT</a>
						</li>
						<li>
							<a href="">CONTACT</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</header>
	<main>
		<span>HELLO</span>
		<div>
			<h2>Designer & front-end developer, creating user-friendly interfaces for websites & applications for startups and entrepreneurs.</h2>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<div class="row">
						<div class="col-md-6 h100">
							<!-- 背景画像が小さくループする -->
							<div class="imageNative" style="background-image: url(image/music.jpg);"></div>
						</div>
						<div class="col-md-6 h100">
							<!-- 背景画像が小さくループする -->
							<div class="imageNative" style="background-image: url(image/servers.jpg);"></div>
						</div>
						<div class="col-md-6 h100">
							<div class="imageNative">
								<div class="imageNative" style="background-image: url(image/hospital.jpg);"></div>
							</div>
						</div>
						<div class="col-md-6 h100">
							<div class="imageNative">
								<div class="imageNative" style="background-image: url(image/photographer.jpg);"></div>
							</div>
						</div>
						<div class="col-md-6 h100">
							<div class="imageNative">
								<div class="imageNative" style="background-image: url(image/payments.jpg);"></div>
							</div>
						</div>
						<div class="col-md-6 h100">
							<div class="imageNative">
								<div class="imageNative" style="background-image: url(image/cocktail.jpg);"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</main>
	<footer></footer>
</body>
</html>

CSS
1コード
2
3html{
4  font-family: sans-serif;
5  font-weight: 500;
6}
7.homeMenu{
8  margin: 10px;
9}
10.myName{
11  border: solid 1px black;
12  margin-left: -70px;
13}
14ul{
15  list-style: none;
16  padding-left: -27rem;
17  border: solid 1px black;
18}
19li{
20  display: inline;
21  list-style: none;
22}
23a{
24  font-family: sans-serif;
25  font-size: 20px;
26  line-height: 30px;
27  text-decoration:none;
28  color: black;
29}
30.imageNative{
31  height: 550px;
32  display: block;
33  background-color: cover;
34  background-position: center center;
35  margin: 15px 0px;
36  background-repeat: no-repeat;
37}
38.header-menu{
39flex-direction: row;
40}