Min-height not expanding - html

Question

So, I'm making a web portfolio as my project and I managed to find a problem. When I use min-height in my "About me" section, the section doesn't seem to adjust its height according to the content. It might be because I use float in my navbar, but I'm not too sure. I would appreciate if someone can help me. Thanks in advance.
This is my HTML and CSS code:
/* global */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
}
a {
text-decoration: none;
}
/* animations */
#keyframes bounce {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(15px);
}
100% {
transform: translateY(0px);
}
}
#keyframes appear {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes popup {
0% {
transform: translateY(200px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* Navbar */
header {
width: 100%;
height: 64px;
text-align: center;
background-color: #1a374d;
display: flex;
justify-content: space-between;
padding: 0 80px;
font-weight: bold;
position: fixed;
z-index: 1;
}
header li {
list-style: none;
font-weight: bold;
}
header a {
color: #b1d0e0;
}
header .brandLong {
width: auto;
height: 64px;
float: left;
display: flex;
align-items: center;
justify-content: center;
color: #b1d0e0;
}
header .brandShort {
width: auto;
height: 64px;
float: left;
display: none;
align-items: center;
justify-content: center;
color: #b1d0e0;
}
header .menu {
width: 50%;
min-width: 350px;
height: 100%;
float: right;
}
header .menu ul {
width: 100%;
height: inherit;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
header .menu li {
height: inherit;
display: flex;
align-items: center;
justify-content: center;
}
header .menu ul a {
width: 25%;
height: inherit;
display: inline-block;
transition: 0.3s;
font-weight: 400;
}
header .menu ul a:hover {
background-color: #b1d0e0;
color: #1a374d;
transition: 0.3s;
font-weight: 400;
}
header #menuToggle {
display: none;
}
header .menu-icon {
display: none;
}
/* Home Section */
.home {
min-height: 100vh;
}
.home .container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-content: center;
}
.home .container img {
height: 100%;
animation: popup 0.8s ease-in-out;
}
.home .container .text {
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
justify-content: center;
animation: appear 1.6s;
}
.home .container .text h1 {
font-size: 72px;
font-weight: bold;
line-height: auto;
}
.home .container .text h1 span {
color: #1a374d;
}
.home .container .text p {
font-size: 24px;
margin-top: 20px;
letter-spacing: 2px;
line-height: 35px;
}
.home .container .arrow {
font-size: 24px;
animation: bounce 2s ease-in-out infinite, appear 1.6s;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 77%;
margin: 0 0 0 35%;
width: 50%;
font-weight: bold;
}
.home .container .arrow a {
color: #1a374d;
}
.home .container .arrow a i {
font-size: 48px;
margin-top: 5px;
}
/* About */
.about {
min-height: 100vh;
background-color: #406882;
color: white;
padding: 0 80px;
}
.about .container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
}
.about .container h1 {
font-size: 64px;
text-align: center;
margin: 150px 0 100px 0;
}
.about .container h2 {
font-size: 40px;
}
.about .container h3 {
font-weight: 400;
margin-bottom: 50px;
font-size: 24px;
}
.about .container .aboutContainer {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.about .container .aboutContainer .desc1 {
width: 25%;
text-align: justify;
padding: 30px;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-evenly;
}
.about .container .aboutContainer .desc1 .top {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.about .container .aboutContainer .desc1 .top p {
line-height: 28px;
margin-top: 12px;
font-size: 20px;
font-weight: normal;
}
.about .container .aboutContainer .desc1 .bottom {
display: flex;
flex-direction: column;
align-items: center;
}
.about .container .aboutContainer .desc2 {
width: 30%;
background-image: url(asset/me2.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 700px;
border-radius: 40px;
margin: 20px;
}
.about .container .aboutContainer .desc2 img {
height: 100%;
}
.about .container .aboutContainer .desc3 {
width: 25%;
padding-left: 50px;
}
.about .container .aboutContainer .desc3 h2 {
margin-bottom: 12px;
}
.about .container .aboutContainer .desc3 ul li {
font-size: 20px;
margin-bottom: 8px;
margin-left: 20px;
}
/* social media */
.socialMedia {
display: flex;
margin-top: 12px;
justify-content: space-evenly;
width: 80%;
}
.socialMedia .instagram {
background-color: white;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #dd2a7b;
border-radius: 50%;
transition: 0.5s;
font-size: 24px;
}
.socialMedia .email {
background-color: white;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #ea4335;
border-radius: 50%;
transition: 0.5s;
font-size: 24px;
}
.socialMedia .email:hover {
background-color: #ea4335;
color: white;
transition: 0.5s;
}
.socialMedia .instagram:hover {
background-color: #dd2a7b;
color: white;
transition: 0.5s;
}
.socialMedia .linkedin {
background-color: white;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #0077b5;
border-radius: 50%;
transition: 0.5s;
font-size: 24px;
}
.socialMedia .linkedin:hover {
background-color: #0077b5;
color: white;
transition: 0.5s;
}
.socialMedia .spotify {
background-color: white;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #1ed761;
border-radius: 50%;
transition: 0.5s;
font-size: 24px;
}
.socialMedia .spotify:hover {
background-color: #1ed761;
color: white;
transition: 0.5s;
}
.socialMedia .github {
background-color: white;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #171515;
border-radius: 50%;
transition: 0.5s;
font-size: 24px;
}
.socialMedia .github:hover {
background-color: #171515;
color: white;
transition: 0.5s;
}
/* Education background */
.about .container .edu {
margin: 50px 0 100px 0;
}
.about .container .edu h2 {
margin-bottom: 24px;
}
.about .container .edu table {
font-size: 24px;
border-collapse: collapse;
}
.about .container .edu table td {
padding: 15px;
padding-right: 100px;
}
.about .container .edu table thead {
background-color: #6998ab;
font-weight: 600;
}
.about .container .edu table tbody {
background-color: #b1d0e0;
}
.about .container .edu table tbody tr:nth-child(2) {
background-color: #a0c4d6;
}
/* Media Query */
#media screen and (max-width: 1200px) {
.home .container img {
display: none;
}
.home .container .text {
text-align: center;
display: flex;
flex-direction: column;
width: 80%;
height: 100%;
justify-content: center;
animation: appear 1.6s;
}
.home .container .arrow {
width: 100%;
margin: 0;
}
}
#media screen and (max-width: 768px) {
/* NavBar */
header {
display: block;
padding: 0;
}
.brandLong {
display: none;
}
.brandShort {
display: flex;
margin-left: 80px;
}
.menu {
width: 100%;
height: auto;
}
.menu ul {
display: block;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s;
}
.menu ul a {
text-align: left;
width: 100%;
height: 50px;
background-color: #1a374d;
}
.menu-icon {
width: 200px;
height: inherit;
display: block;
position: absolute;
top: 18px;
right: 0;
color: #b1d0e0;
}
#menuToggle:checked~ul {
max-height: 350px;
}
.menu-icon i {
font-size: 1.7em;
}
.home .container .text h1 {
font-size: 48px;
}
}
#media screen and (max-width: 480px) {
.brandShort {
display: flex;
margin-left: 40px;
}
.menu-icon {
width: 100px;
}
.home .container .text h1 {
font-size: 36px;
}
.home .container .arrow a {
display: none;
}
}
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="landingPage.css">
<title>Christopher's Portfolio</title>
</head>
<body>
<!-- Nav Bar -->
<header>
<a href="#homeSection">
<figure class="brandLong">Christopher Nathanael Tessy</figure>
</a>
<a href="#homeSection">
<figure class="brandShort">Christopher N. T.</figure>
</a>
<nav class="menu">
<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon"><i class="fa fa-bars"></i></label>
<ul>
<a href="#homeSection">
<li>Home</li>
</a>
<a href="#aboutSection">
<li>About Me</li>
</a>
<a href="#">
<li>Portfolio</li>
</a>
<a href="#">
<li>Contact</li>
</a>
</ul>
</nav>
</header>
<!-- Home Section -->
<section class="home" id="homeSection">
<div class="container">
<img src="asset/me1.png" alt="Christopher NT">
<div class="text">
<h1>
Hey there! I'm <span>Christopher Nathanael Tessy</span>
</h1>
<p>Welcome to my personal web portfolio where I will showcase my best of the best works</p>
</div>
<div class="arrow">
About me
<i class="fas fa-angle-double-down"></i>
</div>
</div>
</section>
<!-- About Me Section -->
<section class="about" id="aboutSection">
<div class="container">
<h1>About Me</h1>
<h2>Christopher Nathanael Tessy</h2>
<h3>Front-End Web Developer</h3>
<div class="aboutContainer">
<div class="desc1">
<div class="top">
<h2>Who am I?</h2>
<p>My name is Christopher Nathanael Tessy. I am a dedicated and hardworking computer science student with a strong passion in front-end web development equipped with strong designing abilities with proven successes in designing posters, banners,
backdrops, social media, and merchandise for multiple years. Committed to working as a collaborative and positive team member. Bilingual, communicative, and ready to join my next team.
</p>
</div>
<div class="bottom">
<h2>Social Media</h2>
<div class="socialMedia">
<a href="mailto:christopher.nathanael1217#gmail.com">
<div class="email">
<span class="far fa-envelope"></span>
</div>
</a>
<a href="https://www.instagram.com/christophertessy_/">
<div class="instagram">
<span class="fab fa-instagram"></span>
</div>
</a>
<a href="https://www.linkedin.com/in/christopher-nathanael-tessy-b30339220/">
<div class="linkedin">
<span class="fab fa-linkedin-in"></span>
</div>
</a>
<a href="https://open.spotify.com/user/21z7frm7cr3jctz2c6zv6nafa?si=bd8ea929cc274a96">
<div class="spotify">
<span class="fab fa-spotify"></span>
</div>
</a>
<a href="https://github.com/TessyJr">
<div class=" github">
<span class="fab fa-github"></span>
</div>
</a>
</div>
</div>
</div>
<div class="desc2">
</div>
<div class="desc3">
<h2>Software and Programming Languages</h2>
<p>
<ul>
<li>Photoshop</li>
<li>Visual Studio Code</li>
<li>Figma</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>C++</li>
</ul>
</p>
</div>
</div>
<div class="edu">
<h2>Education Background</h2>
<table>
<thead>
<tr>
<td>Year</td>
<td>Level of Education</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>2009-2015</td>
<td>Primary School</td>
<td>Sekolah Bina Gita Gemilang</td>
</tr>
<tr>
<td>2015-2021</td>
<td>High School</td>
<td>Penabur Secondary Kelapa Gading</td>
</tr>
<tr>
<td>2021-2025</td>
<td>University</td>
<td>Bina Nusantara University</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</body>
</html>
This is the problem I'm facing:
The background color doesn't cover the bottom area

Answer 1

Remove the height property
.about .container {
width: 100%;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
}

Answer 2

min-height: 100vh to the body element should do the trick. Here, 100vh means that the initial body height will take 100% of the viewport height,
its better to use :
height : 100vh;