Css 宽度：在移动设备上100%不填充屏幕

我目前正试图为移动设备优化Wordpress网站，但我正努力让网站的页脚配合。网址如下：

在手机上加载时，主体的宽度会根据屏幕大小收缩，并包裹其中包含的所有文本。然而，页脚保持其宽度，据我所知，这是因为页脚的宽度是硬编码的，以便在计算机屏幕上看起来很好。我在CSS中做了一个媒体查询，目标是屏幕宽度小于等于500像素的设备，以便使页脚调整到主体的宽度。以下是我一直在调整的CSS片段：

@媒体屏幕和（最大宽度：500px）{
#自定义页脚{
宽度：100%；
}
}

无论出于什么原因，这都不起作用——它仍然显示页脚比身体宽得多。我试过最大宽度：100%，宽度：自动；最大宽度：自动，它们都不工作

如何在没有硬编码的情况下实现这一点？

将CSS从

#教学书{
宽度：100%；
}
#非常底部{
宽度：100%；
}

添加一个类，使其具有更高的优先级

.page#教学指南{
宽度：100%；
}
.page#verybottom{
宽度：100%；
}

我用Firebug试过了，它看起来像这样工作得很好

编辑：在查看了评论中的一些内容后，我注意到一些导致页脚无法填充的内容

.site {
    padding: 0 1.71429rem;
}

这导致#客户页脚两侧都有填充

#teakfooter {
    margin-left: -40px;
}

---

这会导致#teakfooter右侧出现空白。

此外，在firebug中，您可以检查度量（在右侧列中，您计算了样式、样式、度量等）。在度量中，你会看到你的身体周围有一个

填充：24px

解决方案：

body {
  padding: 0; 
}

当我将其加载到Blackberry Bold上时，页脚确实会缩小，但它变得太窄，只占正文宽度的80%左右……请尝试使用以下内容更新CSS：.page#customfooter{height:auto；margin:0；width:100%；}height:auto；不知何故使#customfooter消失，边距为0；保持div比主体窄并居中。我明白你说的客户页脚随高度消失的意思：auto。背景消失了，但内容仍然存在。我试图通过添加一个div来清除所有的浮动，这样height:auto就可以保持背景图像，但它只是平铺了，但并没有解决宽度问题，这就是重点。网站上有一些填充导致了这种情况的发生。和左边的边距：-40px；在#teakfooter上导致其无法填满整个屏幕。