html - 仅在一个方向上水平拉伸(stretch) div

Question

我正在开发一种响应式布局，它基本上在右侧装箱，因此横幅区域与侧边栏齐平/用于桌面和宽 View 。

如果不将容器的宽度设置为固定宽度，我似乎无法让它在右侧齐平，这意味着浏览器宽度即使相差 1px 也会使其悬垂或跨度不够远。

有什么建议吗？我在这里有一个带有标记的 jsfiddle:http://jsfiddle.net/MtQ5J/

这是具体的 html 标记:

        <div class="hero-container">
         <div class="hero wrapper clearfix">
            <h2>
                We thrive on solving other people’s problems in a collaborative setting.<br />
                This means starting by understanding the client’s needs and goals.<br />
                Listening to and understanding our clients is the key to how we work.  
            </h2>
         </div>
        </div>

它是 H5BP、Normalize 和移动优先。

示例截图:

更新

我在标题周围添加了一个容器，在英雄区域之前将其关闭，然后为主要内容重新打开。然后我在英雄旁边 float 了一个空的 div @ 20% 宽度，将英雄设置为 80% 宽度.. 这种作品，但我必须将它 MQ 到死才能让它完美.. 仍在寻找更“流畅的” "如果可能的话解决!

jsfiddle updated

Answer 1

将此规则添加到您的 CSS:

body{
margin:0;
padding:0;
}

JSFiddle Demo

JSFiddle Code