How to set the right space between my sections in css? - html

Question

Well, there are two sections in my HTML code, and those sections have too much space between them, I mean if the screen is fully stretched out and the height is large, it has a dozen of spaces between them. Also for some reason, the second section's text is a bit further from the image.
I've also tried to set display: flex; align-items: flex-start; justify-content:center;, but it hasn't worked. So if you have any idea about this problem, please help.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
body {
background: #343131;
}
nav {
height: 80px;
width: 100%;
background-color: #2b2d2e;
background-image: linear-gradient(62deg, #46484a 0%, #2e2e30 100%);
}
nav i {
color: #d35858;
cursor: pointer;
font-size: 40px;
padding-top: 20px;
padding-right: 20px;
float: right;
}
.nav-link {
height: 100vh;
position: fixed;
width: 100%;
background-color: rgb(42, 43, 43);
left: -100%;
top: 10%;
transition: 0.5s;
display: flex;
align-items: flex-start;
justify-content: center;
}
.nav-link a {
text-decoration: none;
color: #fff;
font-size: 30px;
display: block;
text-align: center;
font-weight: bold;
padding: -100px;
}
a:hover,
a.active {
transition: .5s;
color: rgb(239, 122, 122);
}
.nav-link ul li {
padding: 18px;
}
.nav-link ul {
list-style: none;
margin-top: 50px;
}
.nav-bar-top ul {
padding-top: 32px;
float: right;
padding-right: 80px;
}
.nav-bar-top ul li {
display: inline-block;
padding-left: 15px;
}
.nav-bar-top ul li a {
color: #d5c9c9;
text-decoration: none;
}
.nav-bar-top ul li a.active {
color: #fa9e9e;
}
.nav-bar-top ul li a:hover {
color: #d35858;
}
#about-szabi {
width: 100%;
height: 100vh;
background: #343131;
display: flex;
align-items: flex-start;
justify-content: center;
}
#about-szabi .content img {
height: auto;
width: 320px;
max-width: 100%;
}
section .content img:hover {
transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
transition: 0.5s;
}
.text {
width: 550px;
max-width: 100%;
padding: 10px 30px;
display: grid;
place-items: center;
text-align: center;
}
.text h1 {
color: #d35858;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.text h5 {
font-size: 20px;
color: rgb(193, 183, 183);
text-align: center;
}
.text p {
color: #e6d6d6;
padding-top: 10px;
font-size: 20px;
}
.content {
width: 1280px;
max-width: 95%;
margin: 0px auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
#media(min-width: 601px) {
#nav-bar-icon {
display: none;
}
}
#media(max-width: 601px) {
.nav-bar-top ul {
display: none;
}
}
<nav>
<label id="nav-bar-icon">
<i class="fa-solid fa-bars"></i>
</label>
<div class="nav-bar-top">
<ul>
<li>HOME</li>
<li><a class="active" href="info.html">ABOUT US</a></li>
<li>CONTACT</li>
<li>SERVICES</li>
<li>FEEDBACK</li>
</ul>
</div>
</nav>
<div class="nav-link">
<ul>
<li>HOME</li>
<li><a class="active" href="/">ABOUT US</a></li>
<li>CONTACT</li>
<li>SERVICES</li>
<li>FEEDBACK</li>
</ul>
</div>
<section id="about-szabi">
<div class="content">
<img draggable="false" src="../img/person.png">
<div class="text">
<h1>About Szabolcs</h1>
<h5>Programmer & Web Designer</h5>
<p>
IAliquam lobortis posuere felis, sit amet ultrices turpis suscipit in. Mauris
egestas aliquam lacus, non lobortis mi sollicitudin ut. Donec vitae est
malesuada, dapibus nisi ac, placerat felis. Cras tincidunt vehicula lorem eget
efficitur. Integer vestibulum nulla justo. Mauris efficitur viverra est, sit
amet semper orci tristique eget. Nam condimentum accumsan lectus, a efficitur
orci vestibulum a. Nulla quis dui congue leo ultricies convallis id.
</p>
</div>
</div>
</section>
<section id="about-milan">
<div class="content">
<img draggable="false" src="../img/person2.png">
<div class="text">
<h1>About Milán</h1>
<h5>Programmer & Web Designer</h5>
<p>
Donec velit ipsum, accumsan ut lectus eu, sodales hendrerit enim. Fusce ut
sapien sit amet ligula volutpat condimentum vitae in neque. In sit amet erat
et nisi interdum vestibulum. Nunc vestibulum, dolor id pellentesque dictum,
est nulla hendrerit lacus, vitae ultricies mauris ante vitae tellus. Vivamus
ac nisi at justo tempus imperdiet sed faucibus ex. Curabitur ut lectus leo. In
odio magna, aliquet id lectus in, pretium fermentum massa. Fusce eget
condimentum felis. Morbi quis diam massa.
</p>
</div>
</div>
</section>

Answer 1

#about-szabi {
width: 100%;
height: 100%;
background:#343131;
display: flex;
align-items: flex-start;
justify-content: center;
}
In this part, I used 100% instead of 100vh,
And I got the about-milan css in the html field with the same name as the first part.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
body {
background:#343131;
}
nav {
height: 80px;
width: 100%;
background-color: #2b2d2e;
background-image: linear-gradient(62deg, #46484a 0%, #2e2e30 100%);
}
nav i {
color: #d35858;
cursor: pointer;
font-size: 40px;
padding-top: 20px;
padding-right: 20px;
float: right;
}
.nav-link {
height: 100vh;
position: fixed;
width: 100%;
background-color: rgb(42, 43, 43);
left: -100%;
top: 10%;
transition: 0.5s;
display: flex;
align-items: flex-start;
justify-content: center;
}
.nav-link a {
text-decoration: none;
color: #fff;
font-size: 30px;
display: block;
text-align: center;
font-weight: bold;
padding: -100px;
}
a:hover, a.active{
transition: .5s;
color: rgb(239, 122, 122);
}
.nav-link ul li {
padding: 18px;
}
.nav-link ul {
list-style: none;
margin-top: 50px;
}
.nav-bar-top ul {
padding-top: 32px;
float: right;
padding-right: 80px;
}
.nav-bar-top ul li {
display: inline-block;
padding-left: 15px;
}
.nav-bar-top ul li a {
color: #d5c9c9;
text-decoration: none;
}
.nav-bar-top ul li a.active {
color: #fa9e9e;
}
.nav-bar-top ul li a:hover {
color: #d35858;
}
/* Not default code */
#about-szabi {
width: 100%;
height: 100%;
background:#343131;
display: flex;
align-items: flex-start;
justify-content: center;
}
#about-szabi .content img {
height: auto;
width: 320px;
max-width: 100%;
}
.section .content img:hover {
transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
transition: 0.5s;
}
.text {
width: 550px;
max-width: 100%;
padding: 10px 30px;
display: grid;
place-items: center;
text-align: center;
}
.text h1 {
color: #d35858;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.text h5 {
font-size: 20px;
color:rgb(193, 183, 183);
text-align: center;
}
.text p {
color: #e6d6d6;
padding-top: 10px;
font-size: 20px;
}
.content {
width: 1280px;
max-width: 95%;
margin: 0px auto;
display: flex;
/* sets whether flex items are forced onto one line or can wrap onto multiple lines.
If wrapping is allowed, it sets the direction that lines are stacked */
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
#media(min-width: 601px) {
#nav-bar-icon {
display: none;
}
}
#media(max-width: 601px) {
.nav-bar-top ul {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<link rel="stylesheet" href="../css/info.css">
<script src="https://kit.fontawesome.com/f2665b7baf.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<label id="nav-bar-icon">
<i class="fa-solid fa-bars"></i>
</label>
<div class="nav-bar-top">
<ul>
<li>HOME</li>
<li><a class="active" href="info.html">ABOUT US</a></li>
<li>CONTACT</li>
<li>SERVICES</li>
<li>FEEDBACK</li>
</ul>
</div>
</nav>
<div class="nav-link">
<ul>
<li>HOME</li>
<li><a class="active" href="/">ABOUT US</a></li>
<li>CONTACT</li>
<li>SERVICES</li>
<li>FEEDBACK</li>
</ul>
</div>
<section id="about-szabi">
<div class="content">
<img draggable="false" src="../img/person.png">
<div class="text">
<h1>About Szabolcs</h1>
<h5>Programmer & Web Designer</h5>
<p>
IAliquam lobortis posuere felis, sit amet ultrices turpis suscipit in. Mauris
egestas aliquam lacus, non lobortis mi sollicitudin ut. Donec vitae est
malesuada, dapibus nisi ac, placerat felis. Cras tincidunt vehicula lorem eget
efficitur. Integer vestibulum nulla justo. Mauris efficitur viverra est, sit
amet semper orci tristique eget. Nam condimentum accumsan lectus, a efficitur
orci vestibulum a. Nulla quis dui congue leo ultricies convallis id.
</p>
</div>
</div>
</section>
<section id="about-szabi">
<div class="content">
<img draggable="false" src="../img/person2.png">
<div class="text">
<h1>About Milán</h1>
<h5>Programmer & Web Designer</h5>
<p>
Donec velit ipsum, accumsan ut lectus eu, sodales hendrerit enim. Fusce ut
sapien sit amet ligula volutpat condimentum vitae in neque. In sit amet erat
et nisi interdum vestibulum. Nunc vestibulum, dolor id pellentesque dictum,
est nulla hendrerit lacus, vitae ultricies mauris ante vitae tellus. Vivamus
ac nisi at justo tempus imperdiet sed faucibus ex. Curabitur ut lectus leo. In
odio magna, aliquet id lectus in, pretium fermentum massa. Fusce eget
condimentum felis. Morbi quis diam massa.
</p>
</div>
</div>
</section>
<script src="../js/index.js"></script>
Hello, I have a solution for two problems,
You just have to take a look at a .section .content img:hover field for the image to be responsive.