使标题内容跨越包装宽度

Question

我有一个包装器div，它充当整个页面的包装器。

<div id="wrapper">
    <header id="page-header">
        <div id="header-left"></div>
        <div id="header-right"></div>
    </header>
    <section id="page-body"></section>
</div>

CSS：

#wrapper{ 
    width: 1100px; /* Example / actually using media queries */ 
    margin: 0 auto; 
} 

#page-header{
    position: fixed; 
    width: 100%; 
    top: 0; 
    left: 0; 
} 

我感兴趣的是根据包装元素的宽度获得header-left / header-right范围，并相应地居中，而不会过多地改变HTML结构。

我无法使用inherit属性，因为它会继承标题元素的100％宽度，这是不可取的（在我的情况下）。
我可以为header-left / right元素创建一个单独的包装器，但是想知道是否有一种更短的方法，不需要我为每个媒体查询复制这些格式，并利用包装器的好处。

或者，只需申请一个班级也可以选择 尽管如此，仍有一种感觉，就是要破坏使用包装来管理宽度的目的。

结果示例：

目前，我通过在标题左/右添加一个类wrapper来解决了这个问题。如果您有更好的解决方案，欢迎。

编辑：指向codepen的链接：http://codepen.io/anon/pen/JGoYbE 设计在那里看起来很糟糕，但它足以让人玩耍。

Answer 1

以下是我将如何创建您所描述的设计的示例：

body {
  margin: 0;
}
#wrapper {
  height: 1000px;
}
#page-header {
  display: block;
  position: fixed;
  top: 0;
  height: 100px;
  width: 100%;
  background-color: rgba(0, 0, 0, .5);
  overflow: hidden;
}
#content {
  margin: 0 auto;
  width: 600px;
  height: 100%;
}
#header-left {
  display: inline-block;
  height: 100%;
  width: 49%;
  box-sizing: border-box;
  line-height: 180px;
}
#header-right {
  display: inline-block;
  height: 100%;
  width: 50%;
  color: white;
  text-align: right;
  line-height: 180px;
}
#page-body {
  margin: 0 auto;
  width: 600px;
  background-color: lightgreen;
  height: 100%;
  margin-top: 120px;
}

<div id="wrapper">
  <header id="page-header">
    <div id="content">
      <div id="header-left">Left lorem lorem lorem lorem</div>
      <div id="header-right">lorem lorem lorem lorem Right</div>
    </div>
  </header>
  <section id="page-body">BODY</section>
</div>