导航栏不在浏览器窗口的顶部。我该怎么解决这个问题？
我鼓励你输入我的代码并运行它以获得预览。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="Website(CSS).css" type="text/css" media="screen" title="no title" charset="utf-8">
<title>Hunter's Website</title>
</head>
<body>
<div class="nav">
<div class="container">
<ul class="nav-left">
<li id="twitter">
<a href="http://twitter.com/#"><img src="Twitter.png" width="75" height="75" alt="Twitter" /></a>
</li>
<li id="instagram">
<a href="http://instagram.com/#"><img src="Instagram.png" width="75" height="75" alt="Instagram"/></a>
</li>
<li id="quora">
<a href="http://quora.com/#"><img src="Quora.jpg" width="125" height="54" alt="Quora" /></a>
</li>
</ul>
<ul class="nav-right">
<li id="future-plans">
<a href="insert link">Future Plans</a>
</li>
<li ="contact">
<a href="inset link">Contact</a>
</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="layer"></div>
<div class="container">
<h1>Learn more about me.</h1>
<p>
Click <a href="insert link">here</a> to learn more about my future.
</p>
</div>
</div>
...
</body>
</html>
CSS代码：你可以忽略这些笔记，它们只是提醒我需要做什么。
/* Get the individual social media links to be pretty spaced out from each other,
get the whole box of social image links to be closer to the left border. Get the nav header to be positioned as absolute. Get the -
.nav-right to have better font. To be bigger font, and to pushed a little more to the left of the nav box. */
body {
border: 2px solid green;
}
.nav {
/* Play around with height, try and get edges curved
Try making .jumbotron image to be full sized w/o cropping & 1110 width or whatever */
background-color: red;
height: 11%;
width: 98%;
position: fixed;
z-index: 10;
border: 2px solid black;
}
.nav ul {
display: inline;
border: 2px solid black;
}
.nav li {
display: inline;
border: 2px solid black;
}
.nav .nav-left {
float: left;
clear: both;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
border: 2px solid black;
}
.nav .nav-right {
float: right;
margin-top: 15px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
border: 2px solid black;
}
.jumbotron {
height: 515px;
width: 1110px;
background-image: url('Website .jumbotron.jpeg');
background-repeat: no-repeat;
position: relative;
margin-top: 120px;
border: 2px solid black;
}
.layer {
background-color: rgba(76,76,76, 0.3);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid black;
}
.jumbotron .container {
position: relative;
top: 240px;
left: 26px;
}
.jumbotron h1 {
color: white;
font-family: 'Shift', serif;
font-weight: bold;
font-size: 36px;
}
.jumbotron p {
color: white;
font-family: 'Crimson Text';
font-size: 20px;
}
要将导航栏粘贴在顶部而不留间隙，请在css文件中添加以下代码：
.nav {
position: absolute;
top: 0px;
}
如果你想让导航栏位于窗口的最顶部，只需将此行添加到你的CSS:中
.nav {
top: 0;
}
我建议这样的总体布局（当然是在<body>内部）：
<div id="wrap-out">
<div id="wrap-in">
<nav id="nav"><a href="#">link1</a> | <a href="#">link2</a></nav>
<div id="content">
<h1>some kind of standard layout...</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
<footer id="footer">(C) by Mr. Footer</footer>
</div>
</div>
CSS：
#wrap-out {
max-width: 1000px;
min-width: 300px;
width: 90%;
margin: 0 auto;
}
#wrap-in {
padding: 20px;
}
BTW：下次如果你问问题，给一个CODEPEN或FIDDLE 是非常明智的
看看这个http://codepen.io/elstermann/pen/wBqhc?editors=110一个并围绕播放