如何消除我的部分之间的巨大差距

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

问题是你的身高：

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

改成 50 或 60 看起来好多了！

Answer 2

我继续删除了大量的边距，是的，确实改变了事物所在的位置，但也产生了大量的空白。

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

如何消除我的部分之间的巨大差距

How to remove insane gap between my sections

html

css

sections