CODEWITHSUNDEEP
htmlcss
Graeham Broda
Graeham Broda

Reputation: 141

CSS background colour not extending to the edge of the screen

I am trying to style an application, but for some reason, I cannot make the background of one of my classes extend to the edge of the screen.

I made a fiddle to show this: http://jsfiddle.net/Hydropotamus/krevheyc/

I think the problem is in this class: 

.moving-background {
    left:-10%;
    padding-top:130px;
    padding-bottom:20px;
    padding-right:20px;
    padding-left:20px;
    width:100%;
    background-color:#00a221;

}

As you can see in the fiddle, the background colour doesn't extend to the edge of the screen, and i am unsure of how to move forward with this.

I have tried switching the padding and margins as well, but i can't figure out where i am going wrong.

Upvotes: 1

Views: 11353

Answers (4)

Graeham Broda
Graeham Broda

Reputation: 141

It turns out that that element was in a container with some padding that I didn't notice. I had to remove that padding and then it was able to work. however, i did try your solutions in the fiddle, and it did work so thanks!

Upvotes: 0

SteJ
SteJ

Reputation: 1531

In your CSS add this:

body { margin:0px; padding:0px; }

Different browsers use different margin and padding defaults for the page; best to specify them.

Upvotes: 1

deebs
deebs

Reputation: 1410

the 8px margin in the body is causing that. Some of the css is whacky, but you could also add margin-left: -8px if you want to just change that one area and not affect the others.

.moving-background {
    margin-left: 8px;
}

also, the reason why the top green section does not have that gap is because the position is fixed and left is 0% (should just be 0);

Upvotes: 0

chrisbedoya
chrisbedoya

Reputation: 810

Make sure the margin from the body is set to 0.

body {
   margin: 0;
}

Upvotes: 7

Related Questions