从显示正在发生的事情开始可能更容易。覆盖页面正文文本的黑框/div 是我网站的主导航（导航文本为浅蓝色，因此可能很难看到）。它应该位于标题中羽毛图像的左侧（没有边框）。相反，它超出了正常的文档流程：
它应该在哪里：
这是我的树枝模板：
<!DOCTYPE html>
<html dir="ltr" lang="en-us">
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="Adi Rule, young adult author, author, NH, New Hampshire" />
<meta name="description" content="Official homesite of Adi Rule, young adult author" />
<title>{% block title %}Adi Rule{% endblock %}</title>
{% stylesheets 'bundles/majorproductionsadisite/css/*.css' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
{% endstylesheets %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
<div id="layout">
<div id="header">
<img src="{{ asset('bundles/majorproductionsadisite/images/adi-gradient-logo.jpg') }}" alt="Adi Rule" />
<div id="nav">
<ul>
<li><a href="{{ path('_bio') }}">Bio</a></li> |
<li><a href="{{ path('_books') }}">Books</a></li> |
<li><a href="{{ path('_blog') }}">What's New</a></li> |
<li><a href="{{ path('_contact') }}">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
<hr />
<div id="footer">
Website designed and created by Major Productions LLC
</div>
</div>
{% block javascripts %}{% endblock %}
</body>
</html>
以及该页面的内容模板（其他页面尚未构建）：
{% extends "::base.html.twig" %}
{% block content %}
<div class="book">
Music flows in Sing Da Navelli's blood. When she enrolls at a prestigious conservatory, her first opera audition is for the role of her dreams.
But this leading role is the last Sing's mother ever sang, before her controversial career, and her life, were cut tragically short.
As Sing struggles to escape her mother's shadow and prove her own worth, she is drawn to the conservatory's icy forest, a place steeped in history, magic, and danger.
She soon realizes there is more to her new school than the artistry and politics of classical music.
With the help of a dark-eyed apprentice who has secrets of his own, Sing must unravel the story of the conservatory's dark forest and the strange creature who lives there -- and find her own voice.
</div>
<div class="book">
<p>Papa says I’m a good girl, and he’s right. I don’t do anything bad. I’ve never stolen a piece of cake or killed a beetle. I’ve never wished harm on anyone, not even the priests who would damn me to Eternal Drowning. Not even the people who burned our house to the ground the night my mother died.</p>
<p>It’s a safety precaution. I can feel wickedness smoldering in my chest, balled up, writhing. Like the boiling water they pump out of the lake, solid lead pressing it on all sides until it sloshes and frenzies itself into steam, still trapped. I feel like if I did one small evil thing, I wouldn’t be able to stop myself until I’d laid waste to the world.</p>
<p>Papa says I’m a good girl, and he’s right.<br />
For now.</p>
</div>
{% endblock %}
我的困惑源于我的 CSS。我没有使用任何突然出现在我身上的东西，这表明导航 div 应该在文档流之外。无论如何，我不确定定位导航的最佳方式。
我的 CSS：
@font-face{
font-family: 'Pigeon';
src: url('../fonts/pigeon-webfont.eot');
src: url('../fonts/pigeon-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/pigeon-webfont.woff') format('woff'),
url('../fonts/pigeon-webfont.ttf') format('truetype'),
url('../fonts/pigeon-webfont.svg#webfont') format('svg');
}
#layout {
width: 1000px;
margin: 0 auto;
}
#header {
background-color: /* #7797a7; */ #7799aa;
height: 121px;
font-family: 'Pigeon', Arial, sans-serif;
font-size: 2.25em;
}
#nav {
color: #d2e6f0;
width: 500px;
height: 120px;
border: 1px solid black;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
display: inline-block;
}
#nav ul li a {
color: #d2e6f0;
display: table-cell;
height: 110px;
vertical-align: bottom;
padding-bottom: 10px;
text-decoration: none;
}
#nav ul li a:hover {
background-color: #3981a6;
}
#content {
margin: 40px auto;
width: 600px;
}
hr {
color: #a5cce0;
background-color: #a5cce0;
}
#footer {
text-align: center;
}
任何定位帮助将不胜感激。