css- make background span across page?

Question

I'm trying to make a header that spans across the page.

I've looked all over the internet and tried what they said worked, but it didn't. At least for me.

This is what I'm getting:

And here is my code:

/* USEFUL STUFF
green colour #1(like the .BigTitle): #00CC00
cream colour: #FFFFCC
*/
body{
  background-color:#FFFFCC;
}
.BigTitle{
  background-color: #00CC00;
  width: 100%;
  text-align: center;
}

<div class="BigTitle"><h1>Loriem Ipsum</h1></div>
<div class="sidebar">
  <ul>
    <b>
      <li>STUFF</li>
      <li>STUFF</li>
      <li>STUFF</li>
      <li>STUFF</li>
    </b>
  </ul>
</div>
<div class="what">
  <h1>Lorium Ipsum</h1>
  <p>Bacon ipsum dolor amet fugiat t-bone kevin prosciutto. Duis biltong filet mignon shankle bacon ground round, commodo salami do. Ex qui pastrami cow, aute anim alcatra. Jerky sausage ullamco tail, aliquip et nostrud excepteur beef ad cupidatat sint filet mignon chicken.</p>
  <p>Turducken meatloaf ham hock nulla meatball. Ullamco qui officia quis filet mignon fugiat. Flank irure pig, sausage consectetur shoulder ea incididunt. Aliqua eu kielbasa andouille aute mollit prosciutto enim shankle rump irure. Bresaola consectetur aute, laboris beef short loin dolore. Incididunt sed labore ad fatback, voluptate dolore mollit ea pancetta tongue.</p>
  <p>Lorem esse kevin dolor jowl eiusmod shoulder deserunt kielbasa swine nisi et pancetta sunt ribeye. Est aliqua flank dolore dolor pork chop turducken in ex. Fugiat shank pork belly jowl id, irure turducken pork loin pork velit laborum tri-tip. Tenderloin ribeye proident nulla hamburger irure mollit short ribs ball tip pastrami. Pork chicken ex pastrami.</p>
  <p>Nulla tempor pork chicken in ullamco eiusmod consectetur ut. Venison beef ribs drumstick, shank in tenderloin dolor. Boudin aute proident sed, cow deserunt tongue sirloin porchetta aliquip dolor dolore aliqua chicken. Alcatra ham laboris pig aute landjaeger in occaecat anim consectetur tempor. Brisket nostrud commodo magna reprehenderit, ribeye nisi pancetta esse qui. Ex hamburger quis, leberkas meatloaf turkey shoulder sint filet mignon picanha nulla sirloin.</p>
  <p>Veniam adipisicing meatloaf, esse lorem doner andouille sirloin est chuck ad pariatur. Aliqua enim ham labore brisket leberkas. Drumstick id tri-tip, fugiat sint bresaola aliqua hamburger ullamco pig anim chicken cow aliquip boudin. Cillum venison non, picanha incididunt esse ex bresaola andouille irure anim jerky. Dolor corned beef leberkas, velit voluptate pork loin sunt pork pariatur.</p>
</div>

Answer 1

From CSS Reset:

In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything.

Since you're not resetting your CSS, you're letting the browser's default styling rules to interfere with yours.

You could use a CSS reset to solve your problem or simply apply margin: 0; to the body element.

body {
  background-color: #FFFFCC;
  margin: 0;
}

Answer 2

There is plenty of ways how to achieve what you need. The easiest one is to set

body {
    margin: 0;
}

but this way, your text in the content will start at the very edge of the page. Therefore, you will also need to apply some margin or padding to the text content itself or its wrapper.

The other way is to redefine padding and margin for the heading so it would go over the margin of body. All you need to do is to edit your .BigTitle class like this:

.BigTitle{
    background-color: #00CC00;
    width: 100%;

    padding-left: 8px;
    margin-left: -8px;
    padding-right: 8px;
    margin-right: -8px;
}

It's up to your what way you choose.

Answer 3

Here is the working DEMO for that

You need to manipulate margin property in CSS

Answer 4

Explicitly set in your CSS body { margin: 0px }