如何使我的导航和标题真正达到 100% 宽度

Question

我的网站的问题在于我希望导航和标题从屏幕的一侧一直延续到另一侧。导航从页面的最左侧到屏幕的最右侧，但不转到屏幕左侧，标题只是与页面向右重叠少量。

如果有人能告诉我如何解决这些问题，我会很高兴。这是我网站的 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

有几件事，如果你使用 html5，你可以使用 header 元素并将其 css 设置为 100% 宽度和高度到你想要使用的任何高度。 请参阅下面我的示例。拥有 HTML 最终将有助于帮助您。

.HTML

<header>
       <nav>
       </nav>
</header>

.CSS

header {
  width: 100%;
  height: 5em;
}

http://jsfiddle.net/cornelas/8RXD2/