Вы правы, добавив height: 100% к #navigation-bar-container, но это работает только в том случае, если это родительский элемент, в этом случае #header имеет фиксированную высоту, в этом случае я установил его на 60px.
Я изменил цвет header и nav-bar-container, чтобы вы могли лучше видеть это ниже.
body {
font-family: "Source Sans Pro", sans-serif;
}
body, a, p, h1, h2, h3, h4, h5, h6 {
margin: 0px;
}
a {
text-decoration: none;
}
#header {
background-image: url("header-background-picture.jpg");
background-size: cover;
height: 60px;
background-color: green;
background-position: center;
overflow: hidden;
color: rgb(255, 255, 255);
}
#title, .navigation-bar-link {
float: left;
}
#header, #body, #footer {
padding: 25px;
}
#footer {
background-color: rgb(225, 225, 225);
border-style: solid;
border-width: 0px;
border-top-width: 1px;
border-color: rgb(200, 200, 200);
}
#navigation-bar-container {
display: flex;
height: 100%;
background-color: yellow;
}
#navigation-bar {
margin: auto;
margin-left: 0px;
margin-right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Danny Watts</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" />
</head>
<body>
<div id="container">
<div id="header">
<h1 id="title">Danny Watts</h1>
<div id="navigation-bar-container">
<div id="navigation-bar">
<a href="/" class="navigation-bar-link">Homepage</a>
</div>
</div>
</div>
<div id="body">
<p>Welcome to my website!</p>
<p>The font used is <a href="https://fonts.google.com/specimen/Source+Sans+Pro">Source Sans Pro</a>.</p>
</div>
<div id="footer">
<p>© 2020 Danny Watts</p>
</div>
</div>
</body>
</html>