创建一个居中的整页宽度标题，一边比另一边高

Question

我正在尝试构建一个相当复杂的标头。这应该是它的样子：

如您所见，标题需要在页面上居中，但元素需要扩展页面的宽度。我遇到的问题是我不能让白色部分正确扩展。这就是我目前所拥有的：

我无法想办法将白色背景延伸到左侧的黑条上。我可以使用:before使其工作，但仅限于某些缩放级别（在某些点，徽标和重叠:before之间会出现间隙，导致黑色条纹出血通过），我们需要它在所有缩放级别工作。

我唯一的另一个想法是在整个导航中使用极宽的背景图像，但我认为这也不是一个可接受的解决方案。

有人有任何建议吗？

演示：http://www.weblinxinc.com/beta/header/

Answer 1

尝试使用当前代码（我使用当前的#headerLeft：after伪元素）：

#headerWrapper header #headerLeft:after {
/* clear: both; */
content: "\0020";
display: block;
/* visibility: hidden; */
/* zoom: 1; */
width: 1000px;
height: 50px;
background: white;
top: 50px;
right: 100%;
position: absolute;
margin-right: -60px;
}

总之，我只是用一个伪元素来覆盖白色的左边部分。所以我把它放得很宽，我把它放在徽标上。

随意把它放在另一个元素/伪元素上：我想这个正在制作一个clearfix。