Раздел перекрывает нижний колонтитул, и я пробовал упомянутые решения

Question

У меня перекрытие раздела, не знаю почему. Я пробовал использовать поля и отступы для нижнего колонтитула pu sh с моим .div-wrap, но, похоже, он не работает. Я огляделся и не понял, что это могло быть. Хотелось бы получить какой-то вклад, держу пари, это простое решение, просто не вижу сейчас. Спасибо за вашу помощь.

    <style>
    @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
    </style>
    
    <section class="servies">
        <div class=" services-container">
        <h4 class=" services">
         Gone are the days of mass marketing where brands could create generic messaging and get results. Thankfully we live in a new more progressive era and brands need to be authentic and reach their auidences in a non advertisy way. I promise to help you define that message and get the word out by any means neccary. This can be in the form of idenitity and logo design, user experience and interface design, web design and development, social media marketing and campaign adertising, E-commerce design and development. What ever your creative needs are you can contact me to set up an appointment.
        </h4>
      </div>
    </section>
    
    
    <header>
          <h1>
            <a href="index.html"><img src="my-logo-01.svg" class="menu"></a>
          </h1>
        <nav>
          <a href="about.html" class="underline menu highlight">About</a>
          <a href="services.html" class="underline menu highlight">Services</a> 
          <a href="contact.html" class="underline menu highlight">Contact</a>
          <a href="blog.html" class="underline menu highlight">Blog</a>    
        </nav>  
    </header>
    
    <footer>
      <div class="footer-container">
        <div class="grid-container">
        <div class="based"> 
            <h3>
              BASED IN <br>
              CREAM CITY<br>
              <span class="highlight ">MILWAUKEE</span>
              <span class="highlight ">WISCONSIN</span>
            </h3>
          </div>
        <div class="follow-me">
          <h3>
            FOLLOW ME ON<br>
            <span class="highlight">INSTAGRAM</span>
            <span class="highlight">TWITTER</span>
            <span class="highlight">DRIBBLE</span>
            <span class="highlight">MEDIUM</span>
          </h3>
        </div>
        <div class="inq">
          <h3>
            FOR INQUIRIES<br>
            <span class="highlight">HI@WORKBY</span><br><span class="highlight">CHRIS.ME</span>
          </h3>
        </div>
        <div class="signup">
          <h3>
            SIGN UP FOR MY<br> NEWS LETTER
                      <form action="https://superhi1.createsend.com/t/j/s/vtikrl/" method="post"                            id="subForm" class="sign-up">
                <input placeholder="Email" id="fieldEmail" name="cm-vtikrl-vtikrl"                          type="email" required class="email-input">
                <input type="submit" value="Submit" class="submit">
              </form>
          </h3>
        </div>
      </div>
    </div>
    </footer>
    `
    
        h4 {
      font-size: 48px;
      line-height: 1.2;
    }
    
    section .services {
      height: 100vh;
      margin: auto;
    }
    
     .services-container {
      padding-bottom: 112px;
         min-height: 100%;
      height: auto;
      /* Negative indent footer by its height */
      margin: 0 auto -60px;
      /* Pad bottom by footer height */
      padding: 0 0 60px;
    }
    
    footer {
      height: 100vh;
      margin-top: 112px;
      padding: 64px;
    }
    
    .footer-container {
      margin: auto;
       max-width: 900px;
    }
    
    h3 {
      font-size: 56px;
      line-height: 1.2;
       font-weight: 800;
    }
    
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 80px 80px;
      grid-template-areas: "based follow-me" "inq signup";
     
    }
    
    .signup h3 {
      font-size: 48px;
     
    }
    
    
    
    form, .signup {
      font-size: 35px;
    }
    
    input[type=button], input[type=submit], input[type=reset] {
      background-color: #000000;
      border: none;
      color: white;
      padding: 16px 32px;
      text-decoration: none;
      margin: 4px 2px;
      cursor: pointer;
      width: 100%;
    }

Answer 1

Вы используете height: 100vh, который составляет 100% области просмотра вашего браузера. Это также относительная высота, а не абсолютная высота. Поэтому, если ваш текст внутри этого элемента больше, чем область просмотра, он будет перекрываться со следующим элементом.

Вы можете либо скрыть перекрывающееся содержимое, либо установить высоту как минимум 100vh, чтобы он автоматически разверните, если текст длиннее.

Решение №1

section .services {
    min-height: 100vh;
    margin: auto;
}

Решение №2

section .services {
    height: 100vh;
    margin: auto;
    overflow: hidden;
}