BootstrapでCSSを反映させたい

前提・実現したいこと

YouTubeのチュートリアルを見ながらLP制作中です。予め用意されているHTML/CSS/imgフォルダを使用しています。BootstrapでHTMLを作ってから、手書きのCSSでデザインを整えていくのですが、一部CSSが打ち消されて反映されません。原因が知りたいです。

発生している問題・エラーメッセージ

html, body {
  height: 100%;
  width: 100%;
~~font-family: 'Poppins' , sans-serif;~~
~~color: #222;~~
}

該当のソースコード

<html lang="en">
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Complete Bootstrap 4 Website Layout</title>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
	
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css?_cacheOverride=1583109430473"><link href="http://127.0.0.1:5500/Bootstrap%204%20Site%20Files/style.css?_cacheOverride=1583109430474" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
		<a class="navbar-brand" href="#"><img src="img/logo.png"></a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarResponsive">
			<ul class="navbar-nav ml-auto">
				<li class="nav-item active">
					<a class="nav-link" href="#">Home</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">About</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Services</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Team</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Connect</a>
				</li>
			</ul>
		</div>
</div>
</nav>

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

html, body {
  height: 100%;
  width: 100%;
  font-family: 'Poppins' , sans-serif;
  color: #222;
}

試したこと

＊デベロッパーツールでチェックしましたが、CSSファイルは読み込まれていました。
＊試しにスタイルの末尾に!importantを付けたら反映されました。
＊キャッシュの削除をしました。
＊用意されているフォルダのhtmlには必要なCSSなどのファイルは元々読み込まれていたので、動画を見ながら進めていけば同じように再現されるはずなのですが、どの部分が間違っているのかわかりませんでした。

補足情報（FW/ツールのバージョンなど）

macOS 10.13.6 Visual Studio Code Bootstrap4,HTML5&CSS3

Bootstrap 4 Site Files
├── img
│   ├── background.png
│   ├── background2.png
│   ├── background3.png
│   ├── bootstrap2.png
│   ├── desk.png
│   ├── gif
│   │   ├── chicken.gif
│   │   ├── panda.gif
│   │   ├── poo.gif
│   │   └── unicorn.gif
│   ├── logo.png
│   ├── mac.png
│   ├── team1.png
│   ├── team2.png
│   ├── team3.png
│   └── w3newbie.png
├── index.html
└── style.css