注意：这是一个测试网站，意味着该网站仅用于扩展我在html和css中的知识，不会被发布。
你好！我目前正在从事我的个人项目之一。我遇到了一个问题，就是我的身体似乎在标头周围凝结了自己（在其中会看到空白区域），而不是网站的主体。不适用的页脚也会出现同样的情况。通常我会解决问题，但似乎无法找到解决方案。我可以简要了解出了什么问题吗？
<header>
<h1 id="page_name"> Humble Forest Preserve</h1>
<nav>
<ul id="navigation">
<li> <a href="Forest_preserve_main.html" id="nav">Home</a></li>
<li> <a href="humble_forest_about_us.html" id="nav">About</a></li>
<li> <a href="humble_forest_volunteer.html" id="nav">Volunteer</a></li>
<li> <a href="#" id="nav">Rentals</a></li>
<li> <a href="#" id="nav">News</a></li>
<li> <a href="#" id="nav">Contact</a></li>
</ul>
</nav>
</header>
<body>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<img src="our_mission_pic.jpg" alt="#" id="imagecoloum"> <h2 id="h2styles">Our Mission</h2>
<p id="rightp1">In order to keep the forest clean and safe for both
members and animals,<br /> we push push ourselves using these
objectives.</p>
<button>Learn More</button>
</div>
<div class="col2">
<img src="board_meeting_pic.jpg" alt="#" id="imagecoloum2"><h2 id="h2styles">Board Meetings</h2>
<p>Information on the Forest Preserve of Austin County Board of Commissioners,<br /> board meetings and more.</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<img src="forest_history.jpg" alt="#" id="imagecoloum3"><h2 id="h2styles">History</h2>
<p>There are plenty of historical landmarks within the forest preserve. Rather
if you <br /> like to read the information while in the forest preserve or
learn it from our website,<br /> we can help.</p>
<button>Learn More</button>
</div>
<div class="col2">
<img src="foi_img.jpg" alt="#" id="imagecoloum4"><h2 id="h2styles">Freedom of Information Act</h2>
<p>Members of the public may make requests for inspection or for copies of
public records <br /> for the FPDCC under the Texas Freedom of Information Act
(“FOIA”).</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
<footer>
<ul class="fright"
<li class="ftitle">Learn more</li>
<li class="fcol"> <a href="Forest_preserve_main.html">Humble Forest Preserve.com</li>
<li class="fcol"> <a href="">About us</li>
</ul>
</footer>
/*Html styles*/
html {
background-image: url("green-fade-background.gif");
background-size: cover;
}
/*Body Styles */
body {
background-color: white;
margin-left: 200px;
padding: 25px;
height: 100%;
width: 100%;
font-family: Verdana, Geneva, sans-serif;
}
/*Title and styles*/
h1#page_name {
text-align: center;
width: 80%;
height: 60px;
background-color: rgb(86, 160, 33);
}
/* common column settings */
.colleft,
.colmid,
.colright {
float:left;
width:100;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
margin-left: 60px;
margin-top: 20px;
}
ul#fright {
list-style: none;
margin: 0;
display: inline-block;
}
li.fcol {
background: green;
color: black;
margin-bottom: 2px;
}
/*Horizontal Navigation Styles */
ul#navigation {
background-color: rgb(86, 160, 33);
width: 80%;
}
li#nav {
width: 80px;
height: 20px;
text-align: left;
background-color: rgb(86, 160, 33)
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: none
}
li {
float: left;
width: 20%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: rgb(23, 80, 7);
}
/* Footer style and background */
footer {
display: block;
width: 100%;
height: 100px;
background-color: rgb(86, 160, 33);
color: black;
font-size: 20px;
}
ul#mediaicons {
float: right;
width: 25%;
height: 50%;
}
/* Partnership images and logos placements */
section#partnershiplogo {
float: right;
}
img#partnershipimages {
float: left;
width: 100%;
margin: 40px;
hspace: 5px;
}
li#partnershipimages {
margin: 15px;
padding: 15px;
}
/*Button Style and Control */
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}
答案 0 :(得分：0)
您遇到了一些错误，例如结束HTML标记，主体外部的标头以及我修复的女巫中的多个CSS错误。我将比较这2个，以查看由于有很多要列出的内容而又没有真正列出所有这些内容的事实而导致的更改。
/*Html styles*/
html {
background-image: url("green-fade-background.gif");
background-size: cover;
}
/*Body Styles */
body {
background-color: white;
font-family: Verdana, Geneva, sans-serif;
}
/*Title and styles*/
h1#page_name {
text-align: center;
width: 100%;
height: 60px;
background-color: rgb(86, 160, 33);
}
/* common column settings */
.colleft,
.colmid,
.colright {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
margin-left: 60px;
margin-top: 20px;
}
ul#fright {
list-style: none;
margin: 0;
display: inline-block;
}
li.fcol {
background: green;
color: black;
margin-bottom: 2px;
}
/*Horizontal Navigation Styles */
ul#navigation {
background-color: rgb(86, 160, 33);
width: 100%;
}
li#nav {
width: 80px;
height: 20px;
text-align: left;
background-color: rgb(86, 160, 33)
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: none
}
li {
float: left;
width: 20%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: rgb(23, 80, 7);
}
/* Footer style and background */
footer {
display: block;
width: 100%;
height: 100px;
background-color: rgb(86, 160, 33);
color: black;
font-size: 20px;
}
ul#mediaicons {
float: right;
width: 25%;
height: 50%;
}
/* Partnership images and logos placements */
section#partnershiplogo {
float: right;
}
img#partnershipimages {
float: left;
width: 100%;
margin: 40px;
hspace: 5px;
}
li#partnershipimages {
margin: 15px;
padding: 15px;
}
/*Button Style and Control */
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}<body>
<header>
<h1 id="page_name"> Humble Forest Preserve</h1>
<nav>
<ul id="navigation">
<li> <a href="Forest_preserve_main.html" id="nav">Home</a></li>
<li> <a href="humble_forest_about_us.html" id="nav">About</a></li>
<li> <a href="humble_forest_volunteer.html" id="nav">Volunteer</a></li>
<li> <a href="#" id="nav">Rentals</a></li>
<li> <a href="#" id="nav">News</a></li>
<li> <a href="#" id="nav">Contact</a></li>
</ul>
</nav>
</header>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<img src="our_mission_pic.jpg" alt="#" id="imagecoloum"> <h2 id="h2styles">Our Mission</h2>
<p id="rightp1">In order to keep the forest clean and safe for both
members and animals,<br /> we push push ourselves using these
objectives.</p>
<button>Learn More</button>
</div>
<div class="col2">
<img src="board_meeting_pic.jpg" alt="#" id="imagecoloum2"><h2 id="h2styles">Board Meetings</h2>
<p>Information on the Forest Preserve of Austin County Board of Commissioners,<br /> board meetings and more.</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<img src="forest_history.jpg" alt="#" id="imagecoloum3"><h2 id="h2styles">History</h2>
<p>There are plenty of historical landmarks within the forest preserve. Rather
if you <br /> like to read the information while in the forest preserve or
learn it from our website,<br /> we can help.</p>
<button>Learn More</button>
</div>
<div class="col2">
<img src="foi_img.jpg" alt="#" id="imagecoloum4"><h2 id="h2styles">Freedom of Information Act</h2>
<p>Members of the public may make requests for inspection or for copies of
public records <br /> for the FPDCC under the Texas Freedom of Information Act
(“FOIA”).</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
<footer>
<ul class="fright">
<li class="ftitle">Learn more</li>
<li class="fcol"> <a href="Forest_preserve_main.html">Humble Forest Preserve.com</a></li>
<li class="fcol"> <a href="">About us</a></li>
</ul>
</footer>