CSS元素挤出固定宽度主容器外部，导致背景颜色被切断

Question

我有双色设计，顶部容器的宽度为100％，bg颜色为蓝色。

页面的下半部分为bg颜色白色。

网站的内容宽度为960，每边填充20px，总计1000px。

我的问题是这个地图只在主页上，挤出超出1000px的约束（按设计btw）。

当我减小浏览器宽度并水平滚动时，100％宽度的顶部容器会切断bg颜色，这是由于地图容器。所以我相信这已经解决了这个问题。

现在的解决方案是如何使地图容器挤出主体宽度约束，而不会导致顶部容器上的bg颜色在浏览器窗口缩小并且用户水平滚动时切断？

Here is a screencast显示问题。

带代码的

Here is a codepen。

非常感谢任何想法或帮助。

感谢。

Answer 1

在标题容器上设置min-width，如下所示：

.container-hdr-home {
  width: 100%;
  min-width: 1000px;
  height: 760px;
  background: #2895d5;
}

当身体变窄时，这将阻止该元素的碰撞。

Answer 2

尝试将display: table添加到div.container-hdr-home 它使父div与内在一样宽