I have been attempting to replicate the design from , but with the menu positioned at the top of the screen. Despite reviewing tutorials on w3schools and other sources, I am still unable to understand why it is not aligning correctly at the top. Below is the content of my style.css file:
body {
width:960px;
top:0px;
padding:10px 0;
margin:0 auto;
font-family:Calibri, sans-serif;
}
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:102px;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
}
Next, here is the code from index.html:
<!DOCTYPE html>
<html>
<head>
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="container">
<div id="topnav">
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
If anyone can pinpoint what mistake I might be making, your help would be greatly appreciated.