Using the clear method

Let's solve this using the clear property. What we'll do at the end of secondary-section is add a class of clear to a new div, using the following code:

<div class="clear"></div> 

Next, we'll go into our CSS, and in the area reserved for global styles, underneath the ruleset targeting the wrapper class; this is where we'll create the clear selector and add clear: both:

/***************
Global
***************/
::-moz-selection {
  background-color: #eb2428; 
}
::selection {
  background-color: #eb2428; 
}
.wrapper {
  margin: 0 auto;
  width: 960px;
}
.clear {
  clear: both;
}

So, if we save this and return to the browser, our background color will be green with a bottom margin of 50px. Everything is working very well:

However, we've added extra non-semantic markup to our page. We may even get an SEO deduction for this. Let's explore other ways to do this without adding the extra markup. Get rid of that extra markup we just added to our HTML:

<div class="clear"></div> <!-- delete this -->

Our collapse will return. Now we won't be able to see the green background anymore; that's how we know the collapse is there: