Почему 1 фон "залезает под другой"

@import src('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');

body {
  padding: 0;
  margin: 0;
}

header {
  font-family: 'Titillium Web', sans-serif;
  background: url(../img/fon1.png) no-repeat center top/cover;
  padding-bottom: 160px;
  height: 596px;
}

.container {
  width: 1100px;
  margin: 0 auto;
}

.clearfix {
  content: '';
  display: table;
  width: 100%;
  clear: both;
}

nav {
  float: right;
  padding-top: 60px;
}

div {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.logo {
  float: left;
  margin-top: 58px;
}

.menu {
  padding: 0;
  margin: 0;
  display: block;
}

.menu a {
  font-size: 16px;
  color: #efe8f2;
  text-decoration: none;
}

.menu li {
  float: left;
  display: block;
  margin-right: 45px;
}

.logo__text {
  font-weight: bold;
  font-size: 42px;
  text-align: center;
  padding-top: 200px;
  color: #f7f3ea;
}

.button {
  background: #eb7d4b;
  color: #ffffff;
  border-radius: 3px;
  display: block;
  width: 293px;
  padding: 31px 0px;
  margin: 0 auto;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  margin-top: 67px;
}

#services {
  background: url(../img/fon2.png) no-repeat center top/cover;
}

<header>
  <div class="container">
    <div class="heading clearfix">
      <img src="img/logo.png" alt="Golden" class="logo" />
      <nav>
        <ul class="menu">
          <li><a href="">HOME</a></li>
          <li><a href="">ABOUT</a></li>
          <li><a href="">WORK</a></li>
          <li><a href="">BLOG</a></li>
          <li><a href="">CONTACT</a></li>
        </ul>
      </nav>
      <div class="logo__text">
        Hi there! We are the new kids on the block <br> and we build awesome websites and mobile apps
      </div>
      <a class="button" href="#">WORK WITH US!</a>
    </div>
  </div>

</header>

<section id="services">
  <div class="container clearfix">
    <div class="services__text">
    </div>
  </div>
</section>

<section>
  <div class="container">

  </div>
</section>

<section>
  <div class="container">

  </div>
</section>

<section>
  <div class="container">

  </div>
</section>

<section>
  <div class="container">

  </div>
</section>

<footer>
  <div class="container">

  </div>
</footer>