Basic CSS problem

I am going through the Basic CSS course and applying that to a simple project: create a company team page. You can see it on CodePen here:

There are three sections:

  • nav menu
  • main
  • footer
    The main section has 5 fictional employees.

The problem: the footer background seems to be applied to the top half of the page including the nav and the top 3 employees. Why is the background color black being applied to main? And why is footer not at the bottom of the page?

Ah! Looks like you’ve run into a float issue (easily my least favourite part about CSS, lol). Since the .employee-card divs are being floated to the left, you must “clear” the floats afterwards.

Adding clear: both to footer should do the trick. You can read more about floats here: