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

Question

在我的章节之间有一个巨大的差距，我不知道为什么我尝试以#me {填充底部:150 to }的形式添加填充物，但是我尝试用不同的数字，我看到了当差距变长时的不同，但是当我尝试变得被动的时候，它不会真的对实际发生的事情产生影响。

这是我的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，它看起来好多了！