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

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><a href="index.html">HOME</a></li>
            <li><a class="active" href="info.html">ABOUT US</a></li>
            <li><a href="contact.html">CONTACT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">FEEDBACK</a></li>
        </ul>
    </div>
</nav>

<div class="nav-link">
    <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a class="active" href="/">ABOUT US</a></li>
        <li><a href="contact.html">CONTACT</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">FEEDBACK</a></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><a href="index.html">HOME</a></li>
                <li><a class="active" href="info.html">ABOUT US</a></li>
                <li><a href="contact.html">CONTACT</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">FEEDBACK</a></li>
            </ul>
        </div>
        
    </nav>

    <div class="nav-link">
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a class="active" href="/">ABOUT US</a></li>
            <li><a href="contact.html">CONTACT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">FEEDBACK</a></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.