As a beginner in HTML and CSS, I decided to create a basic website. However, I encountered an issue with the layout - there seems to be a gap between my header image and navigation bar, but I can't figure out what's causing it.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div>
<img src="images/banner.gif">
</div>
<div class=navigationbar margin="auto">
<ul>
<div class="color_change">
<li><a href='change_color.php?w=1'><img src='images/black.png'></a></li>
<li><a href='change_color.php?w=2'><img src='images/blanched_almond.png'></a></li>
<li><a href='change_color.php?w=3'><img src='images/orange.png'></a></li>
<li><a href='change_color.php?w=4'><img src='images/dark_red.png'></a></li></div>
<div class=masa>
</div>
</body>
</html>
CSS
*{
margin: 0%;
padding: 0%;
text-decoration: none;
}
body{
background-image: url(../images/backgroundimage.gif);
}
.navigationbar {
background-color: #101010;
width: 100%;
margin: 0%;
}