(CSS-spanS-rowS)如何使所有模块名称居中并使背景跨度整个页面宽度

Question

我最近有一个Ning帐户。我想使用他们的"添加自定义 CSS"选项对网站进行更多自定义，我希望 ning 网站看起来尽可能接近这个网站。更具体地说，页面顶部的绿色水平条，以及标题组的位置和间距。我目前正在 ning 站点上使用以下 CSS，但无法弄清楚如何使绿色水平条跨越页面的整个宽度。任何帮助、建议或指导将不胜感激。

.mainTab-item.active, .mainTab-item.active > a {
    color: #00a6ed;
}
.site-header {
    height: 0px;
}
.header-container {
    margin-bottom: 15%;
}
h2.module-name {
background-color: #88C540;
    color: #FFFFFF;
    font-size: 16px;
    margin-top: -15%;
    max-width: 100%;
    padding: 30px;
    text-align: center;
    text-shadow: 2px 2px 0px #609F16;
}

以下是常用的 CSS 类和 HTML （ning.com/ning3help/commonly-used-css-classes-and-html）

Answer 1

这里的问题是您的容器宽度为 960px，其中包含绿色条。因此，当您将最大宽度或宽度设置为 100% 时，它是相对于容器的。例如，960px 的 100% 是 960px。

解决此问题的唯一方法是更改标记并将其从 .container 中删除，以使百分比相对于文档。

或者另一种选择是绝对定位div 以将其从文档流中删除。但我强烈建议不要这样做。