Body border does not reach the bottom of the body
<p>I am trying to create a border around the entire body of my webpage, yet whenever I put a border around the body tag, it doesn't reach the bottom.  Also, for some reason there is a space between the body and the bottom of the page.  Please advise!</p>

<p>Here's the code: (see <a href="https://jsfiddle.net/04tpunop/" rel="nofollow">https://jsfiddle.net/04tpunop/</a>)</p>

<p>HTML:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;body&gt;
    &lt;header&gt;
        &lt;nav&gt;
            &lt;div id="navBar"&gt;
          &lt;a class="hdrBtn"&gt;Button&lt;/a&gt;
                    &lt;a class="hdrBtn"&gt;Button&lt;/a&gt;
            &lt;/div&gt;
        &lt;/nav&gt;
    &lt;/header&gt;
    &lt;div id="banner"&gt;
            &lt;h1&gt;Content&lt;/h1&gt;
            &lt;h1&gt;Content&lt;/h1&gt;
            &lt;h1&gt;Content&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div id="content"&gt;
            &lt;h1&gt;Content&lt;/h1&gt;
            &lt;h1&gt;Content&lt;/h1&gt;
            &lt;h1&gt;Content&lt;/h1&gt;
            &lt;h1&gt;Content&lt;/h1&gt;
            &lt;h1&gt;Content&lt;/h1&gt;
            &lt;h1&gt;Content&lt;/h1&gt;
            &lt;h1&gt;Content&lt;/h1&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>CSS:</p>

<pre><code>@import 'https://fonts.googleapis.com/css?family=Open+Sans';

html {
    background-color: black;
    background-size: 500px;
}

body {
    width: 80%;
    max-width: 1250px;
    margin: 0 auto;
    /*padding: 0 20px;*/
    background-color: white;
    overflow: auto;
  border: 20px solid white;
}

header {
    top: 0;
    width: 80%;
    border-top: 10px solid white;
    border-bottom: 2px solid #ff0000;
    position: fixed;
    z-index: 10;
    background-color: white;
}

#banner {
    width: 80%;
    height: 500px;
    position: fixed;
    top: 68px;
    background-color: blue;
}

#content {
    width: 100%;
    position: relative;
    top: 568px;
    background-color: grey;
    /*height: 1000px;*/
}

a.hdrBtn {
    font-family: 'Open Sans', sans-serif;
    color: black;
    padding: 16px 15px 10px;
    font-size: 30px;
    border: none;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    text-decoration: none;
    outline: none;
    display: inline-block;
    text-align: center;
    -o-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -webkit-transition: color 0.2s linear;
    -ms-transition: color 0.2s linear;
    transition: color 0.2s linear;
    -o-transition: background-color 0.1s linear;
    -moz-transition: background-color 0.1s linear;
    -webkit-transition: background-color 0.1s linear;
    -ms-transition: background-color 0.1s linear;
    transition: background-color 0.1s linear;
  margin-left: 6%;
}

button.hdrBtn:hover, a.hdrBtn:hover {
    background-color: #f1f1f1;
    color: #ff0000;
}

.center {
    text-align: center;
}
</code></pre>