How can I make my navigation and header be truly 100% width? - css

Question

The trouble with my site is that I want the nav and header to continue the entire way from one side of the screen to the other. The navigation goes from the far left of my page to the far right of the screen but doesn't go to the left of the screen and the header merely overlaps from the page a small amount to the right.
I'd love it if someone could tell me how to solve these problems. Here's my site's CSS:
/* BACKGROUND */
body {
background-color:#339999;
background-attachment: fixed;
}
*{
margin:0;
padding:0;
}
img {
border:0;
}
/* AREA */
#wrapper {
margin:0 auto;
width:950px;
background:#ffffff;
font-size:1.20em;
}
/* HEADER */
#header {
margin-top: 40px;
height: 150px;
padding: 20px 30px;
width: 100%;
}
/* PAGE */
#content {
min-height:400px;
padding:23px;
text-align:justify;
line-height:1.5;
}
/* FOOTER */
#flexifooter{
width: 950px;
background: #339999;
padding: 10px 0px 0px 0px;
}
/* MENU */
#menu {
position: fixed;
clear: both;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
padding-top: 1px;
float: left;
display: inline;
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#menu {
height:35px;
line-height:34px;
padding:0 10px;
}
/* MENU TEXT */
#menu ul {
list-style-type:none;
}
#menu li {
float:left;
}
#menu li a {
padding:0 15px;
display:block;
color:#ffffff;
font-size: 13px;
margin-right:0px;
}
#menu a {
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
list-style: none;
display: inline;
}
#menu a:hover {
color: #339999;
}
#navigation a:hover, a:visited {
color: #339999;
}
/* HEADINGS & HEADER */
h2 {
font-size:1.75em;
font-weight:normal;
color: #6CC7DC;
margin: 10px 0;
line-height:1.5;
}
#header {
font-size:2.5em;
letter-spacing:1px;
}
#header, #header a {
color:#6F6F6F;
font-style:italic;
font-weight:normal;
}
/* SCROLLBAR */
body {
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 3px;
height: 10px;
}
::-webkit-scrollbar-track-piece {
background-color: #339999;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #FFFFFF;
}
/* PREVENTING UNDERLINED LINKING */
a:hover, a:visited, a:link, a:active {
text-decoration: none;
}

Answer 1

A few things, if you use html5 you can use the header element and set its css to 100% width and height to whatever height you want to use. See my example below. Having the HTML will ultimately assist in helping you.
HTML
<header>
<nav>
</nav>
</header>
CSS
header {
width: 100%;
height: 5em;
}
http://jsfiddle.net/cornelas/8RXD2/