Home How can I stop an element's background from flowing into the rest of the page?

Questions

How can I stop an element's background from flowing into the rest of the page?

January 3, 2022

I’m very new to coding (I’ve only been at this a couple of weeks). I’m playing around with building a basic web page. I have a with a brownish background color. Everything seemed to be working fine, however, when I try to add content outside of the background-color continues to extend.

Is there a way to add new text to the starting below so that the text appears against the green background?

body {
  background-color: #A3B18A;
}

#wrap {
  background-color: #DAD7CD;
  margin: 20px;
  border-radius: 25px;
  /* this is a pretty nifty trick */
  box-shadow: 10px 5px 5px grey;
}

#bodywrap {
  font-family: verdana;
  text-align: center;
  margin-bottom: 10px;
}

#header {
  font-family: fantasy;
  font-size: 50px;
  text-align: center;
  padding-left: 60px;
  line-height: 20px;
}

#header h6 {
  color: #5b616A;
  font-family: sans-serif;
}

nav {
  border-radius: 10px;
  font-size: 30px;
}

nav li {
  display: inline-block;
  padding: 20px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

nav a {
  text-decoration: none;
  color: #5b616A;
  font-family: fantasy;
}

a:hover,
a:active {
  text-decoration: underline;
}

<body>
  <div id="wrap">
    <nav>
      <ul>
        <li><a href="about.html">Home</a></li>
        <li><a href="education.hmtl"> Education </a></li>
        <li><a href="contact.html"> Contact Me</a></li>
        <li><a href="blog.html"> Blog</a></li>
      </ul>
    </nav>
    <div id="header">
      <h2>A lot of nothing</h2>
      <h6> Even more nothing</h6>
    </div>
    <div id="bodywrap">
      <p> Just adding more text here.</a></p>
      <br>
      <br>
      <br>
      <br>
      <br>
      <p> This text will appear with a brown background, how do I get it to appear on the green background?.</p>

    </div>

    <div id="footer">
      <footer>

      </footer>
    </div>
  </div>
</body>

</html>

>Solution :

This is because your footer section is in wrap div. Move footer out of wrap and will be ok. Also you have a close </a> with is not necessary here <p> Just adding more text here.</a></p>

body {
  background-color: #a3b18a;
}

#wrap {
  background-color: #dad7cd;
  margin: 20px;
  border-radius: 25px;
  /* this is a pretty nifty trick */
  box-shadow: 10px 5px 5px grey;
}

#bodywrap {
  font-family: verdana;
  text-align: center;
  margin-bottom: 10px;
}

#header {
  font-family: fantasy;
  font-size: 50px;
  text-align: center;
  padding-left: 60px;
  line-height: 20px;
}

#header h6 {
  color: #5b616a;
  font-family: sans-serif;
}

nav {
  border-radius: 10px;
  font-size: 30px;
}

nav li {
  display: inline-block;
  padding: 20px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

nav a {
  text-decoration: none;
  color: #5b616a;
  font-family: fantasy;
}

a:hover,
a:active {
  text-decoration: underline;
}

<div id="wrap">
    <nav>
        <ul>
        <li><a href="about.html">Home</a></li>
        <li><a href="education.hmtl"> Education </a></li>        
        <li><a href="contact.html"> Contact Me</a></li>
        <li><a href="blog.html"> Blog</a></li>
        </ul>
    </nav>   
    <div id="header">
        <h2>A lot of nothing</h2>
        <h6> Even more nothing</h6>
    </div>
    <div id="bodywrap">
        <p> Just adding more text here.</a></p>
        <br>
        <br>
        <br>
        <br>
        <br>    
    </div>
</div>

 <div id="footer">
      <footer>
          <p> This text will appear with a brown background, how do I get it to appear on the green background?.</p>
      </footer>
  </div>