After reviewing all the similar questions and attempting to apply solutions to my specific situation, I am still unable to resolve the issue. I believed that adding display: block; would eliminate the spaces above and below the header image.
body {
background-image: url("assets/images/richie-pic.jpg");
font-size: 28px;
}
.mrrichie-img {
margin: 0;
padding: 0;
width: 100%;
height: auto;
display: block;
}
.topnav {
overflow: hidden;
background-color: #111111;
}
/* More CSS code included */
<img src="./assets/images/header.png" id="mrrichie-img" alt="header images">
<div class="topnav" id="myTopnav">
<a style="left: 350px;position: relative;" href="#music" class="active">Music</a>
<a style="left: 350px;position: relative;" href="#videos">Videos</a>
<a style="left: 750px;position: relative;" href="#merch">Merch</a>
<a style="left: 750px;position: relative;" href="#aboutme">About me</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>image The inclusion of margin: 0; and padding: 0; may also be impacting the situation, although these were part of a solution I attempted.