页脚代码未在顶部显示3px边框，并且不允许在文本顶部添加空格

Question

我使用了一个新的汉堡包菜单，我已将其添加到页面顶部。页脚现在没有显示3px边框，我无法在文本顶部添加空格。

HTML5汉堡菜单打开整个页面，它有一个不起作用的单独样式表：

<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li><h1>About</h1>
<ul>
<li><a href="#">Athena</a></li>
</ul>
</li>
<li><h1>Illustration Projects</h1>
<ul>
<li><a href="#">The Knowing</a></li>
<li><a href="#">Save The World</a></li>
<li><a href="#">Henrietta Lacks</a></li>
<li><a href="#">The New Yorker</a></li>
<li><a href="#">Myths</a></li>
<li><a href="#">Drawing Laurel</a></li>
<li><a href="#">The Goonies</a></li>
<li><a href="#">Alice In Wonderland</a></li>
<li><a href="#">History Behind a forbidden symbol</a></li>
</ul>
</li>
<li><h1>Graphic Design Projects</h1>
<ul>
<li><a href="#">Experimental Designs</a></li>
<li><a href="#">Watch Designs</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#">HQ Creative</a></li>
</ul>
</li>
<li><h1>Web Design Projects</h1>
<ul>
<li><a href="#web">Web Sites</a></li>
<li><a href="#">Wireframes</a></li>
<li><a href="#mockups">Mockups</a></li>
</ul>
</li>
</ul>
<div class="social">
<a href="#">
<div class="social-icon">
<i class="fa fa-linkedin"></i>
</div>
</a>
<a href="https://twitter.com/VEGAN_NC" target="_blank">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
<!--<a href="#">
<div class="social-icon">
<i class="fa fa-codepen"></i>
</div>
</a>-->
<!--<a href="#">
<div class="social-icon">
<i class="fa fa-behance"></i>
</div>
</a>-->
<!--<a href="#">
<div class="social-icon">
<i class="fa fa-dribbble"></i>
</div>
</a>-->
</div>
</div>
</div>

CSS to Menu，我没有看到它与页脚交互：

ul {
margin:0;
padding:0;
text-decoration:none;
list-style:none;
}
li {
padding:0;
margin:0;
}
/*styling open close button*/
.button {
display:inline;
position:absolute;
right:50px;
top:6px;
z-index:999;
font-size:30px;
}
.button a {
text-decoration:none;
}
.btn-open:after {
color:#276B9E;
content:"\f0c9";
font-family:"FontAwesome";
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.btn-open:hover:after {
color:#FC0;
}
.btn-close:after {
color:#276B9E;
content:"\f00d";
font-family:"FontAwesome";
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.btn-close:hover:after {
color: #FC0;
}
/*overlay*/
.overlay {
display:none;
position:fixed;
top:0;
height:100%;
width:100%;
background:#FFF;
overflow:auto;
z-index:99;
}
.wrap {
color:#e9e9e9;
text-align:center;
max-width:90%;
margin:0 auto;
}
.wrap ul.wrap-nav {
border-bottom:1px solid #FC0;
text-transform:capitalize;
padding:100px 0px 50px;
}
.wrap ul.wrap-nav li {
font-size:20px;
display:inline-block;
vertical-align:top;
width:24%;
position:relative;
}
.wrap ul.wrap-nav li a {
color:#4169E1;
display:block;
padding:8px 0;
text-decoration:none;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
/*.wrap ul.wrap-nav li a:hover {
color:#FC0;
}*/
.wrap-nav h1{
color:#4169E1;
}
.wrap ul.wrap-nav ul {
padding:20px 0;
}
.wrap ul.wrap-nav ul li {
display:block;
font-size:13px;
width:100%;
color:#e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color:#276B9E;
}
.wrap ul.wrap-nav ul li a:hover {
color:#FC0;
}
.social {
font-size:25px;
padding:20px;
}
.social p {
margin:0;
padding:20px 0 5px 0;
line-height:30px;
font-size:13px;
}
/*.social p a {
color:#34B484;
text-decoration:none;
margin:0;
padding:0;
}*/
.social-icon {
width:80px;
height:50px;
background:#e9e9e9;
color:#276B9E;
display:inline-block;
margin:0 20px;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.social-icon:hover {
background:#FC0;
color:#FFF;
}
.social-icon i {
margin-top:12px;
}
@media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
    width:100%;
    padding:20px 0;
    border-bottom:1px solid #575757;
}
.wrap ul.wrap-nav {
    padding:30px 0px 0px;
}
nav ul {
    opacity:0;
    visibility:hidden;
}
.social {
    color:#c1c1c1;
    font-size:25px;
    padding:15px 0;
}
.social-icon {
    width:100%;
    height:50px;
    background:#fff;
    color:#333;
    display:block;
    margin:5px 0;
}
}
.content {
width:100%;
margin-top:200px;
font-size:20px;
color#333;
text-align: center;
}

HTML5页脚部分：

<footer>
<div class="container_12 clearfix">
<div class="grid_4">
<p>All content &copy; 2015 Athena</p>
</div> <!-- end grid_4 -->
<div class="grid_4">
<p id="footer-center">
<a href="#top" class="top-btn" id="back-to-top">Back to top</a> 
<!--<a href="#grid-overlay" id="show-grid">Show grid</a>-->
</p>
</div> <!-- end grid_4 -->
<div class="grid_4">
<p id="footer-right">
Web design by Athena
</p>
</div> <!-- end grid_4 -->
</div> <!-- end container_12 -->
</footer>

CSS3：

footer {
background: #276B9E;
height:50px;
border-top: 3px solid #FC0;
margin-top:30px;
padding: 10px;
color: #FFC92B;
font: 300 .9em 'KozGoPro-ExtraLight', sans-serif;   
}

footer a {
color: #FFF;
text-decoration: none;  
}

footer a:hover {
color: #FC0;
}

#footer-center {
text-align: center;
}

#footer-right {
text-align: right;
}

footer a#back-to-top {
height: 16px;
padding-left: 21px; 
display: inline-block;
background: url(../images/sprite.png) no-repeat;
}

footer a#back-to-top {
background-position: -28px 0;   
}