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 >
        <img src="logo.png" >

            <div >
                <nav >
                    <ul>
                        <div >
                            <li><a href="#about" >About</a></li>
                            <li><a href="#work" >Work</a></li>
                            <li><a href="#contact" >Contact</a></li>
                            <li><a href="Alberto Aday Resume.docx" >Resume</a></li>
                        </div>
                    </ul>
                </nav>



                <section id="me">
                    <div >
                        <h1 >Hi, my name is</h1>
                        <h2 >Alberto Aday.</h2>
                        <h2 >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 >
                        <h1>About me.</h1>
                    </div>
                </section>



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



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



            </div>

    

CodePudding user response：

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 >
        <img src="logo.png" >

            <div >
                <nav >
                    <ul>
                        <div >
                            <li><a href="#about" >About</a></li>
                            <li><a href="#work" >Work</a></li>
                            <li><a href="#contact" >Contact</a></li>
                            <li><a href="Alberto Aday Resume.docx" >Resume</a></li>
                        </div>
                    </ul>
                </nav>



                <section id="me">
                    <div >
                        <h1 >Hi, my name is</h1>
                        <h2 >Alberto Aday.</h2>
                        <h2 >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 >
                        <h1>About me.</h1>
                    </div>
                </section>



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



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



            </div>

    

CodePudding user response：

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!