hr 应该比 div 长（宽）

Question

我有一个网页，当网页显示在平板电脑上时，我使用<hr> 标签来分隔内容。它看起来像这样：

在红色矩形处，这条线应该继续。但是，事实并非如此。为了让<hr> 一直持续到页面边框，我必须在 html/css 中进行哪些更改？

页面在这里：http://crossroads-festival.org/test2015/en/film/almaen 请注意将浏览器宽度减小到至少 811px 以显示水平线。

感谢您的帮助！

更新： <hr> 的 CSS 是

hr {
  height: 0;
  border: none;
  border-bottom: 1px solid #c1c1c1;
  margin-bottom: 1.5em;
  background: none;
}

divider-mobile 类的 css 是：

.divider-mobile {
  margin-top: 3.125em;
  margin-bottom: 3.125em;
  overflow: visible;
  border: none;
  color: #888888;
  background-color: #888888;
  height: 1px;
  width: 150%;
  margin-left: -25%;
}

在 html 中我这样使用它：

<hr class="divider-mobile">

Answer 1

在你的 CSS 中你有：

#filmcontent {
  overflow-x: hidden;
}

这可以防止<hr> 上的负边距到达页面边缘。

您还需要删除<hr> 上的width: 150%; 和margin-left: 25%，而是这样做...

margin-left: -20px;
margin-right: -20px;

（其中 20px 等于 #content .entry-content 上的填充）

这会得到你想要的效果！