ボディーボーダーがボディーの底に届かない

私はボディー・タグの周りにボーダーを置くときはいつでも、私のウェブページのボディー全体にボーダーを作成しようとしています。また何らかの理由で、本文とページの下部との間にスペースがあります。お知らせ下さい！ボディーボーダーがボディーの底に届かない

ここでコードは次のとおりです（https://jsfiddle.net/04tpunop/を参照）

HTML：

<!DOCTYPE html> 
<body> 
    <header> 
     <nav> 
      <div id="navBar"> 
      <a class="hdrBtn">Button</a> 
        <a class="hdrBtn">Button</a> 
      </div> 
     </nav> 
    </header> 
    <div id="banner"> 
      <h1>Content</h1> 
      <h1>Content</h1> 
      <h1>Content</h1> 
    </div> 
    <div id="content"> 
      <h1>Content</h1> 
      <h1>Content</h1> 
      <h1>Content</h1> 
      <h1>Content</h1> 
      <h1>Content</h1> 
      <h1>Content</h1> 
      <h1>Content</h1> 
    </div> 
</body>

はCSS：

@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; 
}

出典

2016-08-11 ThatCrazyCow