我正在为学校做一个我需要建立网站的项目，但是我在制作水平导航栏时遇到了麻烦。它看起来像一个问题的正方形。这是我的HTML：
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
background: #FFF;
margin: 0 auto;
}
.header {
background: #444;
}
.sidebar1 {
float: left;
width: 180px;
background: lightblue;
padding-bottom: 10px;
}
.content {
background:#D5D5D5;
width: 780px;
float: left;
padding: 10px 0;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid black;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background: lightblue;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #851919
}
.footer {
padding: 10px 0;
position: relative;
clear: both;
background:lightblue;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.headertext{
display:inline-block;
float:right;
font-size:100px;
color: white;
margin-right: 70px;
margin-top: 20px;
font-family: "Courier New", Courier, monospace;
}
ul.xyz {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li.abc {
float: left;
}
li.abc a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active2 {
background-color: #4CAF50;
}
#headernav{
height:100px;
width: 1800px;
}<div class="container">
<div class="header">
<div class="headertext">
<p>Peoplepedia</p>
</div>
<a href="#"><img src="../Downloads/man.png" alt="Logo" name="Logo" width="180" height="180" id="Insert_logo" style="background: white; display: block;" /></a>
</div>
<div id="headernav">
<ul class="xyz">
<li class="abc"><a class="active2" href="#home">Home</a></li>
<li class="abc"><a href="#news">News</a></li>
<li class="abc"><a href="#contact">Contact</a></li>
<li class="abc"><a href="#about">About</a></li>
</ul>
</div>
<div class="sidebar1">
<ul class="nav">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p> Fun Fact: </p>
<p>Elon Musk was the inspiration for Tony Stark in the Iron Man movies.</p>
</div>
<div class="content">
<h1>Elon Musk</h1>
<p>Born in South Africa in 1971, Elon Musk became a multimillionaire in his late 20s when he sold his start-up company, Zip2, to a division of Compaq Computers. He achieved more success by founding X.com in 1999, SpaceX in 2002 and Tesla Motors in 2003. Musk made headlines in May 2012 when SpaceX launched a rocket that would send the first commercial vehicle to the International Space Station.</p>
<h3>Young Elon</h3>
<p>Born and raised in South Africa, Elon Musk purchased his first computer at age 10. He taught himself how to program, and when he was 12 he made his first software sale—of a game he created called Blastar. At age 17, in 1989, he moved to Canada to attend Queen’s University, but he left in 1992 to study business and physics at the University of Pennsylvania. He graduated with an undergraduate degree in economics and stayed for a second bachelor’s degree in physics.</p>
<p>After leaving Penn, Elon Musk headed to Stanford University in California to pursue a Ph.D in energy physics. However, his move was timed perfectly with the Internet boom, and he dropped out of Stanford after just two days to become a part of it, launching his first company, Zip2 Corporation.</p>
<p>An online city guide, Zip2 was soon providing content for the new Web sites of both the New York Times and the Chicago Tribune, and in 1999, a division of Compaq Computer Corporation bought Zip2 for $307 million in cash and $34 million in stock options.</p>
<h3>As an Entreprenuer</h3>
<p>Also in 1999, Musk co-founded X.com, an online financial services/payments company. An X.com acquisition the following year led to the creation of PayPal as it is known today, and in October 2002, PayPal was acquired by eBay for $1.5 billion in stock. Before the sale, Musk owned 11 percent of PayPal stock.</p>
<blockquote tml-render-layout="inline">
<p><em>"If I’m trying to solve a problem, and I think I’ve got some elements of it kind of close to being figured out, I’ll pace for hours trying to think it through."</em></p>
</blockquote>
<p>Never one to rest on his laurels, Musk founded his third company, Space Exploration Technologies Corporation, or SpaceX, in 2002 with the intention of building spacecraft for commercial space travel. By 2008, SpaceX was well established, and NASA awarded the company the contract to handle cargo transport for the International Space Station—with plans for astronaut transport in the future—in a move to replace NASA’s own space shuttle missions.</p>
<p>The boundless potential of space exploration and the preservation of the future of the human race have become the cornerstones of Musk's abiding interests, and toward these he has founded the Musk Foundation, which is dedicated to space exploration and the discovery of renewable and clean energy sources. </p>
<h4>SpaceX</h4>
<p><strong>Space Exploration Technologies Corporation</strong> (<strong>SpaceX</strong>) is an American aerospace manufacturer and space transport services company with its headquarters in Hawthorne, California, USA. It was founded in 2002 by former PayPal entrepreneur and Tesla Motors CEO Elon Muskwith the goal of creating the technologies to reduce space transportation costs and enable the colonization of Mars. It has developed the Falcon 1 and Falcon 9 launch vehicles, both of which were designed from conception to eventually become reusable and the Dragon spacecraft which is flown into orbit by the Falcon 9 launch vehicle to supply the International Space Station (ISS) with cargo. A manned version of Dragon is in development.</p>
<p>SpaceX's achievements include the first privately funded, liquid-propellant rocket(Falcon 1) to reach orbit, in 2008; the first privately funded company to successfully launch, orbit and recover a spacecraft (Dragon), in 2010; and the first private company to send a spacecraft (Dragon) to the ISS, in 2012. The launch of SES-8, in 2013, was the first SpaceX delivery into geosynchronous orbit, while the launch of the Deep Space Climate Observatory (DSCOVR), in 2015, was the company's first delivery beyond Earth orbit. On December 21, 2015, SpaceX successfully returned a first stage booster back to the ground at Cape Canaveral, the first such accomplishment by an orbit-capable rocket.</p>
<p>NASA awarded the company a Commercial Orbital Transport System(COTS) contract in 2006, to design and demonstrate a launch system to resupply cargo to the International Space Station (ISS). SpaceX, as of May 2015 has flown six missions to the ISS under a cargo supply contract. NASA also awarded SpaceX a contract in 2011 to develop and demonstrate a human-rated Dragon as part of its Commercial Crew development (CCDev) program to transport crew to the ISS.</p>
<h3>Tesla Motors</h3>
<p>Another Musk venture is Tesla Motors, a company dedicated to producing affordable, mass-market electric cars. Five years after its formation, the company in 2008 unveiled the Roadster, a sports car capable of accelerating from 0 to 60 mph in 3.7 seconds, as well traveling nearly 250 miles between charges of its lithum ion battery. With a stake in the company taken by Daimler and a strategic partnership with Toyota, Tesla Motors launched its initial public offering in June 2010, raising $226 million.</p>
<p>Additional successes include the Model S, the company's first electric sedan. Capable of covering 265 miles between charges, the Model S was honored as the 2013 Car of the Year by <em>Motor Trend magazine.</em> In 2015, the Model S became the first consumer car with autopilot capabilities.</p>
</div>
</div>
<div class="footer">
<center><p>© 2015 Jones Enterprises</p></center>
</div>
我认为li.abc，ul.xyz和headernav存在问题。
任何帮助将不胜感激。我是初学者，不知道我在做什么。
答案 0 :(得分：2)
您可以进行一些更改来解决问题：
关于此<p>
<div class="headertext">
<p>Peopleopedia</p>
</div>
添加margin:bottom: 0;样式。
ul#xyz添加width: 100%; 和
<div id="headernav">删除height: 100px;