(CSS-spanS-rowS) How to center all module names and make background span entire width of page

Question

I recently got a Ning account. I want to customize the site a bit more using their "Add Custom CSS" option I would like the ning site to look as close to this site as possible. More specifically the green horizontal bar across the top of the page, and the location and spacing of the header group. I'm currently using the following CSS on the ning site but can't figure out how to make the green horizontal bar span the entire width of the page. Any help, advise or direction would be greatly appreciated.

.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;
}

Here is the Commonly used CSS classes and HTML (ning.com/ning3help/commonly-used-css-classes-and-html)

Answer 1

The problem here is that your container has a width of 960px which the green bar is included inside. Therefore when you set max-width or width of 100% it is relative to the container. E.g. 100% of 960px is 960px.

The only way around this would be to change the mark-up and take it out of .container in order for the percentage to be relative to the document.

Or another option is to absolutely position the div to take it out of the document flow. But I strongly do not advise that.