How to remove insane gap between my sections

Question

there is a huge gap between my sections and I have no clue why i have tried adding padding in the form of #me { padding-bottom: 150px; } but i tried with different numbers and i see a difference when making the gap longer but when i try going negitive, it cant really seem to have an affect on whats actually going on.

here is my code for HTML

.container {
    width: 100%;
    height: 100%;
    background: #12182b;}

    .me-section {
    text-align: left;
    padding-left: 850px; 
    height: 100vh;
    margin-top: 320px;}

 
    .me-section h1 {
    color: #6dffe7;
    font-size: 20px;
    margin: 0px;}

    .about-section {
    text-align: left;
    padding-left: 850px; 
    height: 100vh;
    margin-top: 320px;}

    .about-section h1 {
    color: #6dffe7;
    font-size: 20px;
    padding-top: 150px;}

 <div class="container">
        <img src="logo.png" class="logo">

            <div class="header">
                <nav class="navbar">
                    <ul>
                        <div class="download-btn">
                            <li><a href="#about" class="about-2">About</a></li>
                            <li><a href="#work" class="work-3">Work</a></li>
                            <li><a href="#contact" class="contact-4">Contact</a></li>
                            <li><a href="Alberto Aday Resume.docx" class="btn">Resume</a></li>
                        </div>
                    </ul>
                </nav>



                <section id="me">
                    <div class="me-section">
                        <h1 class="my-name-after">Hi, my name is</h1>
                        <h2 class="header-name">Alberto Aday.</h2>
                        <h2 class="header-rest">I build on the web.</h2>
                        <p>I'm an aspiring software engineer. I like to build<br>websites. Back-end development is currently <br>progress.</p>
                    </div>
                </section>



                <section id="about">
                    <div class="about-section">
                        <h1>About me.</h1>
                    </div>
                </section>



                <section id="work">
                    <div class="work-section">
                        <h1>Work</h1>
                    </div>
               </section>



                <section id="contact">
                    <div class="contact-section">
                        <h1>Contact</h1>
                    </div>
                </section>



            </div>

    

Answer 1

The issue is your height:

.me-section {
  text-align: left;
  padding-left: 850px; 
  height: 100vh; /* <-------------- */
  margin-top: 320px;
}

Changing it to 50 or 60 it looked a lot better!

Answer 2

I went ahead and removed the massive margins, which yes, did change the position of where things were but also created a ton of whitespace.

.container {
    width: 100%;
    height: 100%;
    background: #12182b;}

    .me-section {
    text-align: left;
    padding-left: 850px; }

 
    .me-section h1 {
    color: #6dffe7;
    font-size: 20px;
    margin: 0px;}

    .about-section {
    text-align: left; }

    .about-section h1 {
    color: #6dffe7;
    font-size: 20px;}

 <div class="container">
        <img src="logo.png" class="logo">

            <div class="header">
                <nav class="navbar">
                    <ul>
                        <div class="download-btn">
                            <li><a href="#about" class="about-2">About</a></li>
                            <li><a href="#work" class="work-3">Work</a></li>
                            <li><a href="#contact" class="contact-4">Contact</a></li>
                            <li><a href="Alberto Aday Resume.docx" class="btn">Resume</a></li>
                        </div>
                    </ul>
                </nav>



                <section id="me">
                    <div class="me-section">
                        <h1 class="my-name-after">Hi, my name is</h1>
                        <h2 class="header-name">Alberto Aday.</h2>
                        <h2 class="header-rest">I build on the web.</h2>
                        <p>I'm an aspiring software engineer. I like to build<br>websites. Back-end development is currently <br>progress.</p>
                    </div>
                </section>



                <section id="about">
                    <div class="about-section">
                        <h1>About me.</h1>
                    </div>
                </section>



                <section id="work">
                    <div class="work-section">
                        <h1>Work</h1>
                    </div>
               </section>



                <section id="contact">
                    <div class="contact-section">
                        <h1>Contact</h1>
                    </div>
                </section>



            </div>