Making the footer section responsive

The last part is thefooter, and, for most websites, it's just a list of links. It's usually displayed it as a simple vertical list; it's not as sophisticated as the header menu we created.

First, we will need to remove the height value we set in the footer; to do that, we can simply replace it with the auto value:

/* Small Mobile Styles */
@media only screen and (max-width: 768px) {
  footer .container {
    height: auto;
  }
}

We also need to display the links in a vertical way by setting the direction of the flexbox, as we saw earlier:

/* Small Mobile Styles */
@media only screen and (max-width: 768px) {
  footer .container {
    flex-direction: column;
    height: auto;
  }
}

The next step will be to change the value of the display we set on our<li>:

footer .main-nav li, footer .right-nav li {
  list-style-type: none;
  display: inline-block;
}

/* Small Mobile Styles */
@media only screen and (max-width: 768px) {
  footer .main-nav li, footer .right...