Html 如何在responsive skeleton中的div中集中内容？

有类似的问题，但没有一个能解决这个问题

我已经使用框架（）构建了我的站点。出于某种原因，当我尝试对站点主div中的内容应用填充或任何大于5px的边距时，文本部分跳转到图像下方。我尝试过使用它们的“offset by”类，但同样的情况也发生了。我试过使用

margin:0自动在该部分中的所有div上，但无效。我也尝试过使用
文本对齐：居中但这也不起作用（奇怪的是，这只将h1元素放在该部分的中心，而没有其他内容…）

我遇到的另一个问题是，我希望所有的背景都能扩展到适合浏览器窗口的宽度，所有的内容都应该放在中间，但这似乎不适合这种布局。如果我将容器div的宽度设置为100%，它确实会扩展，但最终我必须将所有列和类的偏移量设置为100%，然后这会扰乱导航，等等。我想保持我现在的布局，但我只想扩展背景（包括页脚高度），并使所有内容居中

以下是它在浏览器中的屏幕截图：

任何人都可以看一下代码，让我知道我应该在这里修复什么吗？我已经在JSFIDLE上添加了代码：

非常感谢
 骷髅把我弄糊涂了，事情太多了。。。因此，我消除了所有CSS，并添加了一些简单的规则来演示我将用于从头开始编写此行为的技术

因为您希望背景色带延伸到容器之外，所以我将容器设置为100%，并在页眉、main和页脚周围放置额外的div。它们也有100%的宽度。默认情况下，
#页眉、#主页脚
的宽度设置为960px，并通过媒体查询减小。我还将列和头像图像设置为使用百分比而不是像素。我还从HTML中删除了一些内联样式规则，因为它们破坏了这段新代码


当窗口宽度大于959px时，.容器的宽度为960px，
#main
的宽度为960px。当您向
#main
添加边距时，会减小
#main
的宽度，例如，使用5px边距时，main的宽度为950px<代码>三分之一。列
的总边距为20px，宽度为300px，总和为320px<代码>第三.2列

和为640px。因此，一旦您添加了一个余量，640px+320px就不适合于div。站在你的立场上，我可能只是从

.column

中删除一些像素的边距，我不太明白你想对背景做什么（JSFIDLE上没有显示），但是你可能可以将css应用到

html

或

body

元素：

背景图像：url（'/foo.jpg'）和
背景大小：包含以适应元素而不溢出或拉伸。我所说的背景是指页眉、主视图和页脚后面的颜色。就像顶部的灰色条一样，我想在整个屏幕上展开，中间的米色条我想展开，页脚的紫色条应该展开。柏拉图，在什么情况下我应该从.column中删除像素？然后我是否应该将容器的宽度设为100%，并将#main作为边距：0 auto？我都试过了，但还是不起作用。谢谢你。。虽然这确实可以正确调整大小，但删除骨架框架的其他部分会弄乱我的布局。我照着你的样子复制了所有东西，但保留了其余的骨架元素。。它确实移动了中间部分，但仍然没有在中间，页眉和页脚都向左移动。我可以通过将宽度设置为100%来扩展背景，但中间部分从不移动。这正是我想知道的，如何居中，而不是改变太多的布局，以至于破坏了我在其余部分已经完成的。对不起，我想不出比我上面演示的更简单的方法来让背景延伸到元素的宽度之外（将它们包装在自己的容器中，并设置内部元素的宽度。）希望了解骨架框架的人有一个简单的解决方案来解决#main中东西的宽度问题。你考虑过联系骨架开发人员并向他指出这条线索吗？ping@CherryFlavourPez-他们对骨架有多个答案，也许他们能帮上忙？嘿，Pooja，我做了一个小小的改进：。我没有编辑我的文章，因为它没有使用骨架，但请查看-我正在将你的页面分成三个
.container
div，分别用于页眉、main和页脚。每个都包含在
.wide container
中，设置为100%宽度。与我在回答中所做的基本相同，但没有删除骨架代码。谢谢对于这一点，它确实修复了扩展以适应窗口的背景颜色！但是，在全浏览器窗口中扩展时，“main”中的内容仍然不居中（以下是屏幕截图：）。我是否需要在上面添加页边距：0自动？似乎在过去我这样做时没有任何区别。请告诉我您的建议。非常感谢您的帮助！
// part of my css:
.container{width:100%;}
#headerBin{ 
    background-color: white; 
    border-top: 15px solid #4d4d4d;
}

#header, footer, #main{
    width: 960px; 
    margin:auto; 
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    #header, footer, #main{
      width: 768px; 
      margin:auto; 
    }
}