Sticky footer has a bottom margin

Question

Prior to adding the ':last-child' property there was a margin in between the 'div.stickyFooter' and 'footer.siteFooter'. Now the margin appears to moved to the bottom of the footer and the scroll bar is still present which I don't want.

https://i.sstatic.net/Txqdf.jpg

<div id="stickyFooter">
  <header class="siteNav">
    <div class="contain">
      <h1 class="mainHeading">Sticky Footer</h1>
      <nav>
        <ul>
          <li>One</li>
          <li>Two</li>
          <li>Three</li>
          <li>Four</li>
        </ul>
      </nav>
    </div>
  </header>
  <section class="contain">
    <!-- Text -->
  </section>
</div>
<footer class="siteFooter">
  <p>&copy; 2016 Author</p>
</footer>

CSS

.siteNav {
  background: red;
  text-align: center;
}

.siteNav li {
  display: inline-block;
  margin: 0 40px;
}

.siteNav a {
  padding: 15px 25px;
}

.mainHeading {
  margin-top: 0;
}

.siteNav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contain {
  max-width: 70%;
  margin: 0 auto;
}

.siteFooter {
  background: gold;
  text-align: center;
  padding: 1.33em;
}

#stickyFooter {
  min-height: calc(100vh - 93.5313px);
}

p:last-child {
  margin-bottom: 0;
}

Answer 1

margin collapsing will explain your first trouble.

... These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.

https://www.w3.org/TR/CSS2/box.html#collapsing-margins

then body has a margin:1em; to reset to 0

.siteNav {
  background: red;
  text-align: center;
}

.siteNav li {
  display: inline-block;
  margin: 0 40px;
}

.siteNav a {
  padding: 15px 25px;
}

.mainHeading {
  margin-top: 0;
}

.siteNav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contain {
  max-width: 70%;
  margin: 0 auto;
}

.siteFooter {
  background: gold;
  text-align: center;
  padding: 1.33em;
}

#stickyFooter {
  min-height: calc(100vh - 93.5313px);
}

p:last-child {
  margin-bottom: 0;
}

body {
  margin:0;
  }

<div id="stickyFooter">
  <header class="siteNav">
    <div class="contain">
      <h1 class="mainHeading">Sticky Footer</h1>
      <nav>
        <ul>
          <li>One</li>
          <li>Two</li>
          <li>Three</li>
          <li>Four</li>
        </ul>
      </nav>
    </div>
  </header>
  <section class="contain">
    <!-- Text -->
  </section>
</div>
<footer class="siteFooter">
  <p>&copy; 2016 Author</p>
</footer>