I am encountering a white space issue with my HTML nav bar for the first time. I have managed to fix the space on the sides (left and right), but there is still some space at the top of the nav bar. Can someone please assist me in resolving this issue?
To visualize the problem, refer to the following image - Image
Below is the CSS and HTML code that I am using. Please run the code and open it in full mode for a better understanding.
li.na-li {
float: left;
text-align: center;
font-size: 20px;
}
li.na-li a.na-a {
display:block;
text-decoration: none;
color:white;
padding: 15px;
}
li a:hover {
background-color: #00F003;
}
ul.na-ul {
background-color:#000000;
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
}
.navbar {
background-color: #073A00;
width: 0%;
}
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="navbar">
<ul class="na-ul">
<li class="na-li"><a class="na-a" href="#home">Home</a></li>
<li class="na-li"><a class="na-a" href="Services"> Services</a></li>
<li class="na-li"><a class="na-a" href="Contact">Contact</a></li>
<li class="na-li"><a class="na-a" href="Help">Help</a></li>
</ul>
</div>
</body>
</html>