Search code examples
htmlcsscolorsbackground-color

How to make the Background Color of an element width the hole site

<!DOCTYPE html>

<style>
  body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: x-large;
    color: black;
    text-align: center;
  }
  
  #heading {
    background-color: gray;
  }
</style>
<html>
<meta charset="utf-8">

<head>
  <title>Testsite</title>
</head>

<body>
  <div id="top">
    <div id="heading">
      <h1>Test</h1>
    </div>
    <div id="caption">
      <p>Testsite</p>
    </div>
  </div>
  <div id="main">

  </div>
  <div id="footer">

  </div>
</body>

</html>

With this code, the site looks like this:

But I want, that it looks like this: enter image description here In this picture, there is no white bar over the gray bar. I hope, that you understand, what I am trying to say and I hope, that you can help me :)

Solution

  • Add this to your CSS:

    #heading h1 { margin: 0; }