究竟是什么原因导致宽度大于我网页上应该的宽度？

Question

我真的不确定这里发生了什么。我已经评论了我怀疑它的代码区域，确保它不是故障，我显然没有看到这里的东西。希望你们其中一位网页设计专家可以帮助我。

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat";
}

我已经尝试将overflow-x设置为隐藏修复它，问题是当我这样做时，溢出-y似乎会自动设置为自动而不是可见并且当我改变时不会改变将其手动设置为可见。

http://jsfiddle.net/jg10vzcx/

Answer 1

罪魁祸首是.sub-text元素。它是块级段落元素，默认宽度为100%。您将其定位为left: calc(50% - 15vw)以使其居中。在这样做时，它会越过视口（因为它的宽度为100%）并且它正在创建一个水平滚动条。

您可以移除left定位，只需将text-align: center添加到元素中即可居中。

Updated Example

.sub-text {
    position: relative;
    margin-top: 2vh;
    /* left: calc(50% - 15vw); */
    font-size: 2vw;
    text-transform: uppercase;
    text-shadow: 0 0 1vw black;
    text-align: center;
}