This is the final guide for the Tesla project, and in this one, we'll fix the center buttons and footer links.

First, let's fix the footer as this is an easy one. Right-click on the page and open it in Inspect mode. I'm showing you how to debug problems in a real application, instead of just going to the code and fixing it. If you click on the footer <div>, you'll see that it stretches a long way to the left, which means, it's not inside the right <div> container.

To fix it, let's move the footer <div> completely, and out of all <div> tags except the main one.

<div id="footer">
          <div id="footer-links">
            <a class="footer-link" href="#">Tesla Motors &copy; 2016</a>

            <a class="footer-link" href="#">Privacy & Legal</a>

            <a class="footer-link" href="#">Contact</a>

            <a class="footer-link" href="#">Careers</a>

            <a class="footer-link" href="#">Forums</a>

            <a class="footer-link" href="#">Locations</a>

            <a class="footer-link" href="#">
              <img id="flag" src="img/flag.gif" alt="US Flag" />
            </a>
          </div>
        </div>
    </div>  
  </body>

If you refresh the browser now, you can see that our footer is centered in the middle of the page.

Next, we'll move on to the buttons, and these maybe a little harder. If you open the Inspect window, everything will look perfectly fine. So, it may be hard to guess, and in such a case, it's best to go back to your HTML code to look for any mistakes.

Here, I had made a typo mistake and this is the cause of the error. If you look closely, you'll see that the <span> tag is not closed, and this is what is causing the error. If you close the tags, you're output should be:

This is why it's always a good idea to check your tags if you face a bug that doesn't have an obvious solution.

So, with that, our site looks great and is a perfect replica of the Tesla homepage.