CODEWITHSUNDEEP
htmlcss
SumNeuron
SumNeuron

Reputation: 5198

CSS: background-color on section tag doesn't cover full width?

Foremost there are a lot of posts relating to background-color. I have read several and have tried various solutions posted there from setting background-size to making overflow hidden. Nothing seems to work.... How can I get background-color to cover the whole section?

I have a very simple M.W.E. below:

html

<body>
<section>
  TEST!
</section>
</body>

css

body {
  background-color: coral;
}

section {
  background-color: blue;
  width: 100%;
}

Fiddle

Upvotes: 1

Views: 3692

Answers (4)

Masoud Esmaeilian
Masoud Esmaeilian

Reputation: 72

I would recommend reading about "reseting css", zeroing margin and padding of body, html, p and etc. It can solve your problem. reset-css

Upvotes: 0

Lieutenant Dan
Lieutenant Dan

Reputation: 8284

The full width of the page?

You can reset or eradicate with: 

*, html, body { 
  padding: 0px;
  margin: 0px;
}

Updated jsfiddle.

Upvotes: 0

Johannes
Johannes

Reputation: 67778

There is a default margin on the body element, so you should always add this rule:

body, html {
  margin: 0;
}

Here it is applied to your example: https://jsfiddle.net/93669xwh/

Upvotes: 1

repzero
repzero

Reputation: 8412

You need to use margin:auto on body tag

snippet below

body {
  background-color: coral;
  margin:auto;
}

section {
  background-color: blue;
  width: 100%;

}
<body>
<section>
  TEST!
</section>
</body>

Upvotes: 1

Related Questions