如何消除我的各个部分之间的疯狂差距

Question

我的各个部分之间存在巨大的差距，我不知道为什么我尝试以#me {padding-bottom：150px的形式添加填充; }但是我尝试了不同的数字，在使差距更长的时间时，我看到有所不同，但是当我尝试进行负面影响时，它似乎真的不会影响实际发生的事情。

这是我的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

我继续删除了巨大的利润，是的，确实改变了事物的位置，但也造成了大量的空格。

.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>

    

Answer 2

问题是您的身高：

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

将其更改为50或60，看起来好多了！