Despite setting padding: 0;
and margin: 0;
, the div always appears below the top of the browser, without touching it.
Below is the snippet of code:
html,
body {
margin: 0;
padding: 0;
}
.nav>ul>li {
display: inline-block;
padding: 0px 25px 25px 25px;
color: #333333;
font-family: Georgia;
font-size: 14px;
}
.nav>ul {
text-align: right;
list-style: none;
vertical-align: middle;
padding: 20px 0px 20px 0px;
}
.nav {
background-color: #cccccc;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<script rel="javascript" src="Website.js"></script>
<link type="text/css" rel="stylesheet" href="Website.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Georgia|Georgia:bold,italic,underline">
</head>
<body>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Forums</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>