早些时候，我改变了一些东西到我的CSS和混乱的类/ID为我的网页导航栏，它导致按钮堆叠在彼此的顶部…有人能找出什么是错的，或者我怎么能解决这个问题吗?
我附上了我的代码和正在发生的事情的图片…我试过了，但无济于事。还有一些东西在我的CSS是空的，因为我还在工作。
谢谢你。
导航栏
html {
background-color: #85BDA6;
}
#header {
text-align: center;
font-size: 35px;
padding-top: 80px;
padding-bottom: 50px;
}
#header-2 {
text-align: center;
font-size: 30px;
padding-bottom: 20px;
padding-top: 50px;
}
#header-3 {
text-align: center;
font-size: 30px;
padding-bottom: 20px;
padding-top: 50px;
}
#header-4 {
text-align: center;
font-size: 22px;
}
#header-5 {
text-align: center;
font-size: 22px;
padding-top: 20px;
}
#header-6 {
text-align: center;
font-size: 30px;
margin:0;
padding:0;
padding-top: 50px;
}
#pricing {
padding-bottom: 50px;
padding-top: 20px;
}
p {
font-size: 19px;
line-height: 1.7;
text-align: center;
}
#video {
margin-left: auto;
margin-right: auto;
display: block
}
#email {
display: inline-block;
}
#submit {
display: inline-block;
}
.input {
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}
#email {
width: 20%;
height: 25px;
}
#submit {
height: 30px;
}
#nav-bar {
position: fixed;
top: 0;
right: 0;
background-color: grey;
padding-bottom: 10px;
width: 100%;
opacity: 0.5;
}
.nav-link {
font-size: 23px;
padding-top: 10px;
text-decoration: none;
display: flex;
justify-content: end;
display: inline;
right: 0;
color: white;
opacity: 1;
}
.nav-link:hover {
text-decoration: none;
}
.bi bi-truck {
display: block;
margin: auto;
}
.bi bi-emoji-smile {
}
.about-us {
padding-bottom: 50px;
}
.long-distance {
padding-bottom: 50px;
}
@media (min-width: 500px;) {
p {
font-size: 18px;
}
}<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<main>
<header id="header"> Chirila & Co.
<nav id="nav-bar" class="nav-options">
<a href="#header-2" class="nav-link">About Us |</a>
<a href="#header-3" class="nav-link">Services |</a>
<a href="#header-6" class="nav-link">Pricing</a>
</nav>
</header>
<div style="text-align: center">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-truck" viewBox="0 0 16 16">
<path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5v-7zm1.294 7.456A1.999 1.999 0 0 1 4.732 11h5.536a2.01 2.01 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .294.456zM12 10a2 2 0 0 1 1.732 1h.768a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12v4zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
</svg>
</div>
<h2 id="header-2">About Us</h2>
<p class="about-us">Chirila & Co. is a moving company that was born out of the COVID-19 pandemic that started in late 2019. Since the company started, we have provided our services to hundreds of individuals and families that have moved whether it was down around the block or across the country. Our company prides itself in operating with integrity, affordability, flexbility, and great service. We acknowledge that hiring a moving company can really be a hit or miss. We want our clients and prospects to know we are a company that you can count on and trust to move your possessions in a safe and swift manner.</p>
<div style="text-align: center">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-emoji-smile" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
</svg>
</div>
<h3 id="header-3">Services</h3>
<h4 id="header-4">Local Moving</h4>
<p>Whether its around the block or across the state, our company will assist you in moving your possessions and transporting them to your new residence or space.
<h5 id="header-5"> Long-Distance Moving</h5>
<p class="long-distance">Want to move your possessions to a residence or space out of state? Maybe across the country? Not a problem. Our company offers services for long-distance moving as well. From LA to New York or from Florida to Washington, we got you covered.</p>
<div style="text-align: center">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-cash" viewBox="0 0 16 16">
<path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
<path d="M0 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V6a2 2 0 0 1-2-2H3z"/>
</svg>
</div>
<h6 id="header-6">Pricing</h6>
<p id="pricing">With Chirila & Co. we pride ourselves on flexibility and affordability. Pricing depends on various factors such as how many moving trucks may be needed and how far your new residence may be. Submit your email at the bottom of the page and we'll get one of our team members to contact you within 1 business day to discuss your situation and give you a quote. Don't worry, you're in good hands.</p>
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/eiGZZCOy7Yo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<div class="input">
<input type="email" id="email" name="email" placeholder="Enter your email..." required>
<input type="submit" value="submit" id="submit">
</div>
</form>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js">尝试在.nav-link上调整display: inline-block;以适应其内容宽度。块元素占用整个行，除非你手动设置它们的宽度。此外，要手动覆盖导入的样式，请使用display: inline-block !important;。
html {
background-color: #85BDA6;
}
#header {
text-align: center;
font-size: 35px;
padding-top: 80px;
padding-bottom: 50px;
}
#header-2 {
text-align: center;
font-size: 30px;
padding-bottom: 20px;
padding-top: 50px;
}
#header-3 {
text-align: center;
font-size: 30px;
padding-bottom: 20px;
padding-top: 50px;
}
#header-4 {
text-align: center;
font-size: 22px;
}
#header-5 {
text-align: center;
font-size: 22px;
padding-top: 20px;
}
#header-6 {
text-align: center;
font-size: 30px;
margin:0;
padding:0;
padding-top: 50px;
}
#pricing {
padding-bottom: 50px;
padding-top: 20px;
}
p {
font-size: 19px;
line-height: 1.7;
text-align: center;
}
#video {
margin-left: auto;
margin-right: auto;
display: block
}
#email {
display: inline-block;
}
#submit {
display: inline-block;
}
.input {
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}
#email {
width: 20%;
height: 25px;
}
#submit {
height: 30px;
}
#nav-bar {
position: fixed;
top: 0;
right: 0;
background-color: grey;
padding-bottom: 10px;
width: 100%;
opacity: 0.5;
}
.nav-link {
font-size: 23px;
padding-top: 10px;
text-decoration: none;
display: inline-block !important;
color: white;
opacity: 1;
}
.nav-link:hover {
text-decoration: none;
}
.bi bi-truck {
display: block;
margin: auto;
}
.bi bi-emoji-smile {
}
.about-us {
padding-bottom: 50px;
}
.long-distance {
padding-bottom: 50px;
}
@media (min-width: 500px;) {
p {
font-size: 18px;
}
}<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<main>
<header id="header"> Chirila & Co.
<nav id="nav-bar" class="nav-options">
<a href="#header-2" class="nav-link">About Us |</a>
<a href="#header-3" class="nav-link">Services |</a>
<a href="#header-6" class="nav-link">Pricing</a>
</nav>
</header>
<div style="text-align: center">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-truck" viewBox="0 0 16 16">
<path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5v-7zm1.294 7.456A1.999 1.999 0 0 1 4.732 11h5.536a2.01 2.01 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .294.456zM12 10a2 2 0 0 1 1.732 1h.768a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12v4zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
</svg>
</div>
<h2 id="header-2">About Us</h2>
<p class="about-us">Chirila & Co. is a moving company that was born out of the COVID-19 pandemic that started in late 2019. Since the company started, we have provided our services to hundreds of individuals and families that have moved whether it was down around the block or across the country. Our company prides itself in operating with integrity, affordability, flexbility, and great service. We acknowledge that hiring a moving company can really be a hit or miss. We want our clients and prospects to know we are a company that you can count on and trust to move your possessions in a safe and swift manner.</p>
<div style="text-align: center">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-emoji-smile" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
</svg>
</div>
<h3 id="header-3">Services</h3>
<h4 id="header-4">Local Moving</h4>
<p>Whether its around the block or across the state, our company will assist you in moving your possessions and transporting them to your new residence or space.
<h5 id="header-5"> Long-Distance Moving</h5>
<p class="long-distance">Want to move your possessions to a residence or space out of state? Maybe across the country? Not a problem. Our company offers services for long-distance moving as well. From LA to New York or from Florida to Washington, we got you covered.</p>
<div style="text-align: center">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-cash" viewBox="0 0 16 16">
<path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
<path d="M0 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V6a2 2 0 0 1-2-2H3z"/>
</svg>
</div>
<h6 id="header-6">Pricing</h6>
<p id="pricing">With Chirila & Co. we pride ourselves on flexibility and affordability. Pricing depends on various factors such as how many moving trucks may be needed and how far your new residence may be. Submit your email at the bottom of the page and we'll get one of our team members to contact you within 1 business day to discuss your situation and give you a quote. Don't worry, you're in good hands.</p>
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/eiGZZCOy7Yo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<div class="input">
<input type="email" id="email" name="email" placeholder="Enter your email..." required>
<input type="submit" value="submit" id="submit">
</div>
</form>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js">让bootstrap为您完成这项工作。只需将类nav添加到#nav-bar
html {
background-color: #85BDA6;
}
#header {
text-align: center;
font-size: 35px;
padding-top: 80px;
padding-bottom: 50px;
}
#header-2 {
text-align: center;
font-size: 30px;
padding-bottom: 20px;
padding-top: 50px;
}
#header-3 {
text-align: center;
font-size: 30px;
padding-bottom: 20px;
padding-top: 50px;
}
#header-4 {
text-align: center;
font-size: 22px;
}
#header-5 {
text-align: center;
font-size: 22px;
padding-top: 20px;
}
#header-6 {
text-align: center;
font-size: 30px;
margin:0;
padding:0;
padding-top: 50px;
}
#pricing {
padding-bottom: 50px;
padding-top: 20px;
}
p {
font-size: 19px;
line-height: 1.7;
text-align: center;
}
#video {
margin-left: auto;
margin-right: auto;
display: block
}
#email {
display: inline-block;
}
#submit {
display: inline-block;
}
.input {
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}
#email {
width: 20%;
height: 25px;
}
#submit {
height: 30px;
}
#nav-bar {
position: fixed;
top: 0;
right: 0;
background-color: grey;
padding-bottom: 10px;
width: 100%;
opacity: 0.5;
}
.nav-link {
font-size: 23px;
padding-top: 10px;
text-decoration: none;
display: flex;
justify-content: end;
display: inline;
right: 0;
color: white;
opacity: 1;
}
.nav-link:hover {
text-decoration: none;
}
.bi bi-truck {
display: block;
margin: auto;
}
.bi bi-emoji-smile {
}
.about-us {
padding-bottom: 50px;
}
.long-distance {
padding-bottom: 50px;
}
@media (min-width: 500px;) {
p {
font-size: 18px;
}
}<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<main>
<header id="header"> Chirila & Co.
<nav id="nav-bar" class="nav nav-options">
<a href="#header-2" class="nav-link">About Us |</a>
<a href="#header-3" class="nav-link">Services |</a>
<a href="#header-6" class="nav-link">Pricing</a>
</nav>
</header>
<div style="text-align: center">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-truck" viewBox="0 0 16 16">
<path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5v-7zm1.294 7.456A1.999 1.999 0 0 1 4.732 11h5.536a2.01 2.01 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .294.456zM12 10a2 2 0 0 1 1.732 1h.768a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12v4zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
</svg>
</div>
<h2 id="header-2">About Us</h2>
<p class="about-us">Chirila & Co. is a moving company that was born out of the COVID-19 pandemic that started in late 2019. Since the company started, we have provided our services to hundreds of individuals and families that have moved whether it was down around the block or across the country. Our company prides itself in operating with integrity, affordability, flexbility, and great service. We acknowledge that hiring a moving company can really be a hit or miss. We want our clients and prospects to know we are a company that you can count on and trust to move your possessions in a safe and swift manner.</p>
<div style="text-align: center">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-emoji-smile" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
</svg>
</div>
<h3 id="header-3">Services</h3>
<h4 id="header-4">Local Moving</h4>
<p>Whether its around the block or across the state, our company will assist you in moving your possessions and transporting them to your new residence or space.
<h5 id="header-5"> Long-Distance Moving</h5>
<p class="long-distance">Want to move your possessions to a residence or space out of state? Maybe across the country? Not a problem. Our company offers services for long-distance moving as well. From LA to New York or from Florida to Washington, we got you covered.</p>
<div style="text-align: center">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-cash" viewBox="0 0 16 16">
<path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
<path d="M0 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V6a2 2 0 0 1-2-2H3z"/>
</svg>
</div>
<h6 id="header-6">Pricing</h6>
<p id="pricing">With Chirila & Co. we pride ourselves on flexibility and affordability. Pricing depends on various factors such as how many moving trucks may be needed and how far your new residence may be. Submit your email at the bottom of the page and we'll get one of our team members to contact you within 1 business day to discuss your situation and give you a quote. Don't worry, you're in good hands.</p>
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/eiGZZCOy7Yo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<div class="input">
<input type="email" id="email" name="email" placeholder="Enter your email..." required>
<input type="submit" value="submit" id="submit">
</div>
</form>
<!-- <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js">-->