The last part is the footer, 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-nav li {
    display: block;
  }
}

Also, we need to remove the padding we set on the <a> tag:

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

Finally, we will need to remove the default padding from the <ul>:

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

Now we're all done.