Learning html, bootstrap, and css styling can be a confusing endeavor. Sometimes things don't work as expected, like changing the background color. Despite following what seems like a simple solution after googling, the background color remains unchanged in the code below. Spending time experimenting with different variations might eventually solve the issue, but the real question is why it doesn't work in this example where the body is explicitly set to have a background color of #000000.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Portfolio</title>
<meta name="description" content="Portfolio page">
<meta name="author" content="Christoffer Berg">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Portfolio</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class = "active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="container-fluid text-center bgim bgimg">
<div class="row">
<div class="col-sm-12">
<h1>Home</h1>
</div>
</div>
</div>
<div class="container-fluid text-center bgim bgimg">
<div class="row">
<div class="col-sm-12">
<h1>About</h1>
</div>
</div>
</div>
<div class="container-fluid text-center bgim bgimg">
<div class="row">
<div class="col-sm-12">
<h1>Portfolio</h1>
</div>
</div>
</div>
<div class="container-fluid text-center bgim bgimg">
<div class="row">
<div class="col-sm-12">
<h1>Contact</h1>
</div>
</div>
</div>
<script src="js/scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
The styles.css file:
h1 {
font-family: "Courier New", Courier, monospace;
}
body {
background: #000000;
}