Margin Not working?

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
  
  <div class="page">

    <!-- Panel -->
    <div class="panel">
        <!-- Scrolling Content -->
        <div class="content">

            <header class="panel-header">
                <h1>The Title</h1>
                <div class="nav">
                    <a href="#"><span>Link 1</span></a>
                    <a href="#"><span>Link 2</span></a>
                    <a href="#"><span>Link 3</span></a>
                </div>
            </header>
            <!-- margin-bottom above and margin-top below overlap: WHY? -->
            <section class="panel-content">
                <h2>This is a sub title for description</h2>
                <p class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
                <img />
            </section>

            <footer class="panel-footer">
                <ul class="other">
                    <li>Key: Value</li>
                    <li>Key: Value2</li>
                </ul>
            </footer>

        </div>
    </div>


</div>

  </body>

</html>


/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}


/*! example css */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    font-size: 100%;
    color: #fff;
}

p {
    font-size: 0.75rem;
    line-height: 1.166em;
}

a {
    text-decoration: none;
    color: #fff;
}

.page {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 580px;
    background-color: rgba(0,0,0,0.7);
}

.panel .content {
    padding: 10.3125rem 3.125rem 0;
}

.panel .panel-header {
    margin: 0 0 1rem;
}

.panel .panel-content {
    margin: 1rem 0 0;
}

.panel .panel-footer {
    
}

h1 {
    font-size: 8.75rem;
    letter-spacing: 0.05em;
    line-height: 0.814286em;
    text-transform: uppercase;
    margin: 0;
}

h2 {
    font-size: 2.25rem;
    line-height: 1em;
    color: #f00;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}

.nav {
    padding: 2rem 0 0;
}

.description {
    border-top: 0.125rem solid #fff;
    border-bottom: 0.125rem solid #fff;
    text-transform: uppercase;
}

.other {
    list-style-type:none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
.other li {
    margin: 0;
    padding: 0.5625rem 1.5rem;
    border: 1px solid #fff;
    display: inline-block;
    margin: 0 5px;
}

# Margin Tests

Not sure why the margins are overlapping between panel-header and panel-content.  
Does any one know why this is?  Did I miss something?  I've tried variations to  
get this to work, the only way is to define as an inline-block instead of block,  
but I don't want it as an inline block.