Nav bar won't render correctly - html

Question

My Navigation bar seems to extend out further than where the rest of my page stops. See my code within a JSfiddle with what's happening here. I can't seem to figure out why this is happening.
HTML:
<div id="header-wrapper">
<center>
<img src="images/logo.png" alt=""/>
</center>
<div class="container">
<div class="row">
<div class="12u">
<header id="header">
<nav id="nav">
<i class="fa fa-home"></i>&nbsp Home
<i class="fa fa-flag-o"></i>&nbsp RFP Recap '14-'15
<i class="fa fa-database"></i>&nbsp Archived Updates
<i class="fa fa-phone"></i>&nbsp Contact Us
<i class="fa fa-folder-open-o"></i>&nbsp Member Contacts
<i class="fa fa-sign-in"></i>&nbsp Log In
</nav>
</header>
</div>
</div>
</div>
</div>
CSS:
/* Header */
#header-wrapper {
background-color: #007294;
background-image: -moz-linear-gradient(top, #008dab, #007294);
background-image: -webkit-linear-gradient(top, #008dab, #007294);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab), to(#007294));
background-image: -ms-linear-gradient(top, #008dab, #007294);
background-image: -o-linear-gradient(top, #008dab, #007294);
background-image: linear-gradient(top, #008dab, #007294);
}
#header {
position: relative;
border-radius: 10px;
border: solid 1px #006e8b;
box-shadow: inset 0px 0px 0px 1px #12a0bf, 0px 1px 4px 0px rgba(0,0,0,0.10);
background-color: #007b9d;
background-image: -moz-linear-gradient(top, #008ead, #007b9d);
background-image: -webkit-linear-gradient(top, #008ead, #007b9d);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008ead), to(#007b9d));
background-image: -ms-linear-gradient(top, #008ead, #007b9d);
background-image: -o-linear-gradient(top, #008ead, #007b9d);
background-image: linear-gradient(top, #008ead, #007b9d);
height: 86px;
width: 1200px;
margin-top: 0%;
margin-right: 0;
margin-bottom: 2.5%;
margin-left: 0;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
}
#header h1 {
position: absolute;
left: 0px;
top: 10px;
color: #fff;
font-size: 2.4em;
letter-spacing: -2px;
line-height: 86px;
}
#header h1 a {
color: #fff;
text-decoration: none;
}
#header nav {
position: absolute;
right: 40px;
top: 1px;
line-height: 84px;
text-transform: ;
font-size: 1.3em;
letter-spacing: -1px;
width: 1066px;
height: 92px;
}
#header nav a {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 0 25px 0 25px;
outline: 0;
}
#header nav a.current-page-item {
background-color: #007897;
background-image: -moz-linear-gradient(top, #007b99, #007897);
background-image: -webkit-linear-gradient(top, #007b99, #007897);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007b99), to(#007897));
background-image: -ms-linear-gradient(top, #007b99, #007897);
background-image: -o-linear-gradient(top, #007b99, #007897);
background-image: linear-gradient(top, #007b99, #007897);
box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.1), 0px 0px 5px 1px rgba(255,255,255,0.1);
}
#header nav a:hover {
background-color: #0882a1;
background-image: -moz-linear-gradient(top, #0782a0, #077d9b);
background-image: -webkit-linear-gradient(top, #0782a0, #077d9b);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0782a0), to(#077d9b));
background-image: -ms-linear-gradient(top, #0782a0, #077d9b);
background-image: -o-linear-gradient(top, #0782a0, #077d9b);
background-image: linear-gradient(top, #0782a0, #077d9b);
box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.05), 0px 0px 5px 1px rgba(255,255,255,0.05);
}

Answer 1

You are missing value for css in line 80:
text-transform: ;
Plus html entities like $nbsp have ; at the end $nbsp;

Answer 2

Set body tag to:
body{
position:relative;
margin:0 auto;
width:1200px;
}
Next give #header-wrapper & #header WIDTH of 100%
#header-wrapper,#header{
width:100%;
}
This should keep your #header inside of your Wrapper, and Wrapper should remain inside of your Body.
/== TAB TEXT ==/
Try replacing your #header nav a with this
#header nav a {
float:left; <!-- Changed from display:inline-block; -->
text-decoration: none;
color: #fff;
padding: 0px 0px 0px 10px; <!-- changed from 0px 25px 0px 25px-->
outline: 0;
}