Currently, our Navbar does not correspond with the rest of the project. In this lesson, we'll fix it.

Step 1

Add a .container to the Navbar to center the elements within.

  <nav class="navbar navbar-expand-lg navbar-dark indigo fixed-top">
      <div class="container">
          
      </div>
  </nav>
            

Step 2

Now we'll take care of navigation links. Have you noticed that we set before to each section an ID? That's a good moment to use it.

Firstly we'll remove all unneccessary elements from the Navbar (like search box and brand link).Then for each <a> inside Navbar we'll set an ID corresponding with a proper section.

Finally our Navbar should look like this:

<nav class="navbar navbar-expand-lg navbar-dark indigo fixed-top">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <!--New links-->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#best-features">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
            <!--New links-->
            
        </div>
    </div>
</nav>
            

Now when you click on some link in the navbar you'll be moved to the linked section.

Step 3

At the end we will add a footer to our Landing Page. Go to the FOOTER DOCUMENTATION, grab the footer's code and paste it just below <main> section.

Additionally, you can change a color class of th footer to .indigo for the Footer, to make it more consistent with the rest of our project. I would also recommend to change .container-fluid to .container to keep the same layout across the entire project.

<!--Footer-->
<footer class="page-footer indigo center-on-small-only">

    <!--Footer Links-->
    <div class="container">
        <div class="row">

            <!--First column-->
            <div class="col-md-6">
                <h5 class="title">Footer Content</h5>
                <p>Here you can use rows and columns here to organize your footer content.</p>
            </div>
            <!--/.First column-->

            <!--Second column-->
            <div class="col-md-6">
                <h5 class="title">Links</h5>
                <ul>
                    <li><a href="#!">Link 1</a></li>
                    <li><a href="#!">Link 2</a></li>
                    <li><a href="#!">Link 3</a></li>
                    <li><a href="#!">Link 4</a></li>
                </ul>
            </div>
            <!--/.Second column-->
        </div>
    </div>
    <!--/.Footer Links-->

    <!--Copyright-->
    <div class="footer-copyright">
        <div class="container-fluid">
            © 2015 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>

        </div>
    </div>
    <!--/.Copyright-->

</footer>
<!--/.Footer-->           
              

Now you can edit Footer's content according to your needs.