css - 在屏幕上向右扩展偏移背景颜色

Question

我正在尝试创建一个标题，其中徽标和菜单位于页面的中心，但是菜单 div 的背景颜色延伸到屏幕的右侧。

http://jsfiddle.net/gKnuY/777/ ,

HTML

<div id="wrap" align="center">
    <div id="header" >
        <div class="header-logo">
            Logo Here
        </div>
        <div class="header-menu">
            ABOUT | CARREERS | PRODUCTS | SOMTETHING | OTHER
        </div>
    </div>    

    <div id="main"></div>
</div>

CSS

*{
    margin:0px;
}
html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 70px;} 

#footer {position: relative;
    margin-top: -70px; 
    height: 70px;
    background-color:#383838;
    -webkit-box-shadow: 0px -10px 5px 5px #cacaca;
    box-shadow: 0px -10px 5px 5px #cacaca;
    clear:both;} 
#header {
    height:100px;
    left:0px;
    right:0px;
    width:960px;
}
.header-logo {
    position: relative;
    float:left;
    background-color:#654654;
    width:200px;
    height:100px;

}
.header-menu {
    position:relative;
    text-align:left;
    float:left;
    height:100px;
    background-color:#383838;
    -webkit-box-shadow:  0px 30px 5px 0px #cacaca;
    box-shadow:  0px 30px 5px 0px #cacaca;
}

我该怎么办？

谢谢

Answer 1

在标题的主容器上，您需要使其扩展 100%，同时具有left一定的量。

这就是我改变的

#header {
  height:100px;
  left: 40%;
  width:100%;
  position: relative;
  background: #383838;
}

JSFIDDLE