Can anyone help me with my navbar issue? I want it to stay on top of the page, but there's a huge gap between the top of the page and the nav bar. I've tried running a JS file, but it doesn't seem to fix the problem. Any ideas on how to make it work properly? HTML can be so tricky sometimes. I appreciate any help in advance.
/*Custom Font for The Simpsons*/
@font-face{
font-family: 'TheSimpsons';
src:url('font/SimpsonsFont.otf');
}
/*Styling for "HOME" page*/
body{
margin: 0;
background-color: grey;
}
/*Styling for 'title'*/
.titulo{
top: 0;
position: absolute;
background-color: yellow;
display: inline-block;
position: relative;
margin: 0;
width: 100%;
background-image: url(img/clouds.jpg);
text-align: center;
background-size: 40%;
}
.titulo h1{
font-family: TheSimpsons;
color:yellow;
text-shadow: 2px 2px black;
}
/*Styling for the NavBar*/
.navbar{
position: fixed;
width: 100%;
background-color: yellow;
border-bottom: solid 2px black;
}
.navbar ul{
list-style-type: none;
margin: 0;
padding: 0.5%;
position: center;
font-family: TheSimpsons;
font-size: 18px;
text-align: center;
}
.navbar li{
display: inline;
padding:2px 20px 2px 20px;
}
.navbar a{
color: black;
text-decoration: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
<title>The Simpsons</title>
</head>
<body>
<div class="titulo">
<h1>The Simpsons</h1>
</div>
<div class="navbar">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Characters</a></li>
<li><a href="#">Series</a></li>
<li><a href="#">Movies</a></li>
</ul>
</div>
</body>
</html>