半页全宽样式CSS

Question

I am currently working on this website: http://mdftanzania.com . I am using Wordpress and headway101. I want to have a full width green background color that applies to the begin part of the page: About Us and Services. I add a div class to the part of the page where the green background has to be. I tried to style the div class to a full width green background, this didn't work out and at the moment only a part is styled now (see the website: http://mdftanzania.com ).

I understand that there is another solutions, that is creating a container or widget above the container for the content, where I place the first part of the page text in. The problem with this is that it is confusing for my client where to edit the text in the page. The simplicity of Wordpress goes basically away then. Because of that, I am looking for a solution with CSS styling, so the client is only dealing with the 's.

Does anybody has a solution for this?

Answer 1

You have this rule set in your css:

.block-type-content {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 120px;
}

So children of this container, even though they may have a width of 100%, have to obey this padding of their parent. That's why you don't get a full width green bar. You might try negative margin-left and right to expand your green bar:

.color {
    margin: 0 -25px;
    padding: 0 25px;
}

At least in Firefox/Mac, this solves your issue.

Answer 2

Since you have predetermined a padding to the content block , it is obviously affecting all the child elements that are contained in it, including the div with green background, which means that you should either remove that padding and apply it only to specific elements, or apply this simple CSS workaround to your div:

{
    margin: 0 -25px;
    padding: 0 25px;
}

This makes it, in your words, "full width" and applies a padding to its content.