html - 如何将一个新的 div 放在另一个 div 下以创建一个新的部分？

Question

我正在尝试制作我的第一个个人作品集，这没什么疯狂的，但我想要三个部分，一个关于，一个关于元素，一个关于联系，恰好放在彼此之上。我希望我的第二个和第三个 div 看起来像我的第一个 div。但是，当我放置它时，它会一直延伸到左上角，我该如何修复它，使其位于第一个 div 的下方？

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Hevetica, sans-serif;
  font-size: 30px;
}


/* navbar beginning */

.navContainer {
  display: flex;
  padding: 25px;
  padding-left: 250px;
  background-color: #66B1E8;
  list-style-type: none;
}

.containerTwo {
  display: flex;
  justify-content: flex-end;
}

li {
  flex: 1;
}

.info {
  padding-right: 75px;
}

a {
  color: black;
  cursor: pointer;
}

a:link {
  text-decoration: none;
}

a:hover {
  color: #889199;
}


/* navbar end */


/* about beginning*/

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: absolute;
  top: 85px;
  bottom: 0;
  background-color: #37A9BF;
}

.about {
  font-size: 50px;
  margin-bottom: 50px;
}

.description {
  width: 75%;
  word-spacing: 5px;
  line-height: 1.5em;
}

span {
  background-color: #fdff32;
}


/* about end*/


/* projects beginning*/

.projects {
  background-color: #4AE1FF
}


/* projects end*/

<nav>
  <ul class="navContainer">
    <li><a href="#">Christopher A</a></li>
    <div class="containerTwo">
      <li class="info"><a href="#">About</a></li>
      <li class="info"><a href="#">Projects</a></li>
      <li class="info"><a href="#">Contact</a></li>
    </div>
  </ul>
</nav>
<!--END OF NAVBAR-->

<!--ABOUT-->
<div class="main">
  <div class="about">About</div>
  <div class="description">
    <p>
      Hello, my name is Chris A, I am a self taught
      <span>Front End Web Developer</span> currently on my way to become a <span>Full Stack Developer</span>, located in New York City. I am pursuing the opportunity to begin my career in Web Development industry and I am willing to relocate to do so.
    </p>
  </div>
</div>
<!--ABOUT END-->

<!--PROJECTS-->
<div class="Projects">
  sddgdsg
</div>
<!--PROJECTS END-->

Answer 1

从 .main 类中删除 position:absolute:

* {
margin: 0;
padding: 0;
}
body {
font-family: Hevetica, sans-serif ;
font-size: 30px;
}
/* navbar beginning */
.navContainer {
display: flex;
padding: 25px;
padding-left: 250px;
background-color: #66B1E8;
list-style-type: none;
}
.containerTwo{
display: flex;
justify-content: flex-end;
}
li {
flex:1;
}
.info {
padding-right: 75px;
}
a {
color: black;
cursor: pointer;    
}
a:link {
text-decoration: none;
}
a:hover{
color: #889199;
}   
/* navbar end */

/* about beginning*/
.main {
display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
width: 100%;

top: 85px;
bottom: 0;
background-color: #37A9BF;
}
.about {
font-size: 50px;
margin-bottom: 50px;
}
.description{
width: 75%;
word-spacing: 5px;
line-height: 1.5em;
}
span {
background-color: #fdff32;
}
/* about end*/

/* projects beginning*/
.projects {
background-color:#4AE1FF
}
/* projects end*/

<nav>
<ul class="navContainer">
    <li><a href="#">Christopher A</a></li>
    <div class="containerTwo">
    <li class="info"><a href="#">About</a></li>
    <li class="info"><a href="#">Projects</a></li>
    <li class="info"><a href="#">Contact</a></li>
    </div>
</ul>
 </nav>
<!--END OF NAVBAR-->

<!--ABOUT-->
<div class="main">
<div class="about">About</div>
<div class="description">
<p>
    Hello, my name is Chris A, I am a self taught 
<span>Front End Web Developer</span> currently on my way to become 
a <span>Full Stack Developer</span>, located in New York City. I am 
pursuing the opportunity to begin my career in Web Development 
industry 
and I am willing to relocate to do so.
</p>
</div>
</div>
<!--ABOUT END-->

<!--PROJECTS-->
<div class="Projects">
sddgdsg
</div>
<!--PROJECTS END-->