我正在尝试创建一个新的部分，但是标签与我的主页重叠。我尝试添加DIV，删除Divs并添加更多部分，但无法进入解决方案。是因为我的样式还是由于我的HTML？
/* Base Styles -------------------- */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body */
body {
font-family: 'Playfair Display', serif;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("img/body-image1.jpg") no-repeat center center / cover;
color: #fff;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
padding: 0 3rem;
}
h1,
h2 {
font-weight: 200;
margin: 0.4rem;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2rem;
color: #fff;
}
/* Navigation Styles */
.row {
float: right;
list-style: none;
margin-top: 40px;
margin-right: 80px;
}
.row li {
display: inline-block;
margin-left: 40px;
text-transform: uppercase;
font-size: 19px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
padding: 8px 0px;
}
.row li:hover,
.row li:active {
border-bottom: 2px solid #48a8ce;
}
/* Media queries for home page */
@media(min-width: 1200px) {
h1 {
font-size: 5rem;
}
}
@media(max-width: 800px) {
.container {
padding: 0 1rem;
}
h1 {
font-size: 3rem;
}
}
@media(max-width: 500px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.5rem;
}
}
/* Cursor for Typewriter */
.txt-type>.txt {
border-right: 0.2rem solid #777;
}
/* Aspirations Section */
/* .section-head {
padding-left: 500px;
padding-top: 0px;
} */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlos Gonzales</title>
</head>
<body>
<header>
<nav>
<div class="row">
<ul>
<li>
<a href="#home"></a>Home</li>
<li>
<a href="#aspirations"></a>Aspirations</li>
<li>
<a href="#about"></a>About</li>
<li>
<a href="#contact"></a>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1>Carlos Gonzales The
<span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
</h1>
<h2>Welcome to my website !</h2>
</div>
<section id="aspirations" class="aspiration-section">
<h2 class="section-head">Aspirations</h2>
<p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
</p>
<a href="Contact" class="btn-aspirations">Help Develop ParkingBud Now</a>
</section>
<script src="main.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlos Gonzales</title>
</head>
<body>
<header>
<nav>
<div class="row">
<ul>
<li>
<a href="#home"></a>Home</li>
<li>
<a href="#aspirations"></a>Aspirations</li>
<li>
<a href="#about"></a>About</li>
<li>
<a href="#contact"></a>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1>Carlos Gonzales The
<span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
</h1>
<h2>Welcome to my website !</h2>
</div>
<section id="aspirations" class="aspiration-section">
<h2 class="section-head">Aspirations</h2>
<p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
</p>
<a href="Contact" class="btn-aspirations">Help Develop ParkingBud Now</a>
</section>
<script src="main.js"></script>
</body>
</html>我删除了重复的html和body标签。然后，我在同一body内添加了其他部分，每个部分之后的每个部分。我还注意到您在导航中的标签之前关闭了<a>标签，也通过在链接标签后移动</a>来修复该标签。
我认为这就是您要想要的？这样的东西？
/* Base Styles -------------------- */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body */
body {
font-family: 'Playfair Display', serif;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("img/body-image1.jpg") no-repeat center center / cover;
color: #fff;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
padding: 0 3rem;
}
h1,
h2 {
font-weight: 200;
margin: 0.4rem;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2rem;
color: #fff;
}
/* Navigation Styles */
.row {
float: right;
list-style: none;
margin-top: 40px;
margin-right: 80px;
}
.row li {
display: inline-block;
margin-left: 40px;
text-transform: uppercase;
font-size: 19px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
padding: 8px 0px;
}
.row li:hover,
.row li:active {
border-bottom: 2px solid #48a8ce;
}
/* Media queries for home page */
@media(min-width: 1200px) {
h1 {
font-size: 5rem;
}
}
@media(max-width: 800px) {
.container {
padding: 0 1rem;
}
h1 {
font-size: 3rem;
}
}
@media(max-width: 500px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.5rem;
}
}
/* Cursor for Typewriter */
.txt-type>.txt {
border-right: 0.2rem solid #777;
}
/* Aspirations Section */
/* .section-head {
padding-left: 500px;
padding-top: 0px;
} */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlos Gonzales</title>
</head>
<body>
<header>
<nav>
<div class="row">
<ul>
<li>
<a href="#home">Home</a></li>
<li>
<a href="#aspirations">Aspirations</a></li>
<li>
<a href="#about">About</a></li>
<li>
<a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1>Carlos Gonzales The
<span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
</h1>
<h2>Welcome to my website !</h2>
</div>
<section id="aspirations" class="aspiration-section">
<h2 class="section-head">Aspirations</h2>
<p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
</p>
<a href="Contact" class="btn-aspirations">Help Develop ParkingBud Now</a>
</section>
<section id="about" class="about-section">
<h2 class="section-head">About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia feugiat pharetra. Cras gravida lobortis pellentesque. Etiam pellentesque maximus tincidunt. Mauris urna nulla, vestibulum vitae euismod sit amet, consectetur ut ante. Ut molestie, nunc non vehicula ullamcorper, sapien lorem vestibulum est, in pulvinar nibh est et dolor. Morbi at posuere eros. Maecenas ornare risus id felis aliquam, quis lacinia mauris faucibus. Nunc ut sagittis neque. Vivamus imperdiet tristique lorem. Suspendisse tellus massa, iaculis in ultricies in, gravida non ex. Phasellus nec dolor magna.
</p>
</section>
<section id="contact" class="contact-section">
<h2 class="section-head">Contact</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia feugiat pharetra. Cras gravida lobortis pellentesque. Etiam pellentesque maximus tincidunt. Mauris urna nulla, vestibulum vitae euismod sit amet, consectetur ut ante. Ut molestie, nunc non vehicula ullamcorper, sapien lorem vestibulum est, in pulvinar nibh est et dolor. Morbi at posuere eros. Maecenas ornare risus id felis aliquam, quis lacinia mauris faucibus. Nunc ut sagittis neque. Vivamus imperdiet tristique lorem. Suspendisse tellus massa, iaculis in ultricies in, gravida non ex. Phasellus nec dolor magna.
</p>
</section>
<script src="main.js"></script>
</body>
</html>