html - 横幅图片被剪裁，未显示为整个浏览器宽度

Question

我有一个程序员为我的网站编写一个页面，但是当我们将代码迁移到我的网站(在 Shopify 上)时，有些东西停止工作了。我已经能够修复几乎所有问题，但顶部横幅仍然给我带来麻烦。

我希望它填满整个浏览器宽度(就像页面下方的另一个横幅一样)但它被裁剪为 970 像素宽。我该如何解决这个问题以使其响应并填充整个浏览器宽度？我还希望整个页面在标题下居中。

我使用的代码在这里(我包括完整的代码，所以我不会错过任何重要的东西):codepen.io/anon/pen/xZZwZN

当我在 codepen 中运行它时，它可以正常工作，所以我想知道它是否因为编码到我的 Shopify 主题中的页面宽度而对其进行了裁剪。关于如何仅在此页面上修复/覆盖此问题的任何想法？

Answer 1

从 .container .columns 的 css 中移除 float : left 以居中对齐。

修改后页面如下图所示-

希望对您有所帮助!