页脚可以水平滚动，但不应该

Question

我创建了我的网站，它的页脚可以水平滚动，但它不应该。它比网站的其余部分更宽。

HTML 页脚：

<div class="footer">Atomdev.tk &copy; 2017</div>

CSS 页脚：

.footer {
    width:100%;
    position: absolute;
    overflow: hidden;
    left: 0
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: #222222;
    padding: 30px;
}

这是我的带有此页脚的网站：atomdev.tk

Answer 1

您可以...

将box-sizing: border-box;添加到.footer（默认情况下，盒子模型会将任何paddings和borders添加到元素的计算宽度 - box-sizing: border-box保持padding/border的宽度在指定的宽度内)

或

删除 width(s) 并添加 right: 0;

页脚可以水平滚动，但不应该

Footer is scrollable horizontally but it shouldn't

html

css

footer