我对编码很陌生(我只做了几周(。我在玩建立一个基本的网页。我有一个褐色背景色的。一切似乎都很好，然而，当我尝试添加背景颜色之外的内容时，颜色会继续扩展。
有没有办法在下面的开头添加新的文本，使文本显示在绿色背景下？
body {
background-color: #A3B18A;
}
#wrap {
background-color: #DAD7CD;
margin: 20px;
border-radius: 25px;
/* this is a pretty nifty trick */
box-shadow: 10px 5px 5px grey;
}
#bodywrap {
font-family: verdana;
text-align: center;
margin-bottom: 10px;
}
#header {
font-family: fantasy;
font-size: 50px;
text-align: center;
padding-left: 60px;
line-height: 20px;
}
#header h6 {
color: #5b616A;
font-family: sans-serif;
}
nav {
border-radius: 10px;
font-size: 30px;
}
nav li {
display: inline-block;
padding: 20px;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
}
nav a {
text-decoration: none;
color: #5b616A;
font-family: fantasy;
}
a:hover,
a:active {
text-decoration: underline;
}<body>
<div id="wrap">
<nav>
<ul>
<li><a href="about.html">Home</a></li>
<li><a href="education.hmtl"> Education </a></li>
<li><a href="contact.html"> Contact Me</a></li>
<li><a href="blog.html"> Blog</a></li>
</ul>
</nav>
<div id="header">
<h2>A lot of nothing</h2>
<h6> Even more nothing</h6>
</div>
<div id="bodywrap">
<p> Just adding more text here.</a></p>
<br>
<br>
<br>
<br>
<br>
<p> This text will appear with a brown background, how do I get it to appear on the green background?.</p>
</div>
<div id="footer">
<footer>
</footer>
</div>
</div>
</body>
</html>这是因为您的footer节在wrap分区中。将页脚移出换行符即可。此外，您有一个关闭的</a>，此处不需要<p> Just adding more text here.</a></p>
body {
background-color: #a3b18a;
}
#wrap {
background-color: #dad7cd;
margin: 20px;
border-radius: 25px;
/* this is a pretty nifty trick */
box-shadow: 10px 5px 5px grey;
}
#bodywrap {
font-family: verdana;
text-align: center;
margin-bottom: 10px;
}
#header {
font-family: fantasy;
font-size: 50px;
text-align: center;
padding-left: 60px;
line-height: 20px;
}
#header h6 {
color: #5b616a;
font-family: sans-serif;
}
nav {
border-radius: 10px;
font-size: 30px;
}
nav li {
display: inline-block;
padding: 20px;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
}
nav a {
text-decoration: none;
color: #5b616a;
font-family: fantasy;
}
a:hover,
a:active {
text-decoration: underline;
}<div id="wrap">
<nav>
<ul>
<li><a href="about.html">Home</a></li>
<li><a href="education.hmtl"> Education </a></li>
<li><a href="contact.html"> Contact Me</a></li>
<li><a href="blog.html"> Blog</a></li>
</ul>
</nav>
<div id="header">
<h2>A lot of nothing</h2>
<h6> Even more nothing</h6>
</div>
<div id="bodywrap">
<p> Just adding more text here.</a></p>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div id="footer">
<footer>
<p> This text will appear with a brown background, how do I get it to appear on the green background?.</p>
</footer>
</div>