First up we have to create a div to place our menu. We are going to create a horizontal menu just below the header, So the divs we create will be inserted into our index.html file after the clossing row div for the header - directly before the <div class='row'> <div class="col-md-8 main">

We create a row div and inside it create a column div that spans the full 12 bootstrap columns. We are also giving the colomn the class menu. so we can style it easily. 


<div class ="row">
     <div class="col-12 menu" >

      </div>
</div>

The menu we are going to create uses the <ul> unordered list tag to nest our menu inside <li> list items. Inside each list item is nested an anchor tag for each of the menu items links. So inside the menu div we have:


<ul>
  <li><ahref="default.html">Home</a></li>
  <li><ahref="news.html">News</a></li>
  <li><ahref="contact.html">Contact</a></li>
  <li><ahref="about.html">About</a></li>
</ul>

The HTML for the menu therefore looks like this:


<div class ="row">
     <div class="col-12 menu" >
<ul>
   <li><ahref="default.html">Home</a></li>
   <li><ahref="news.html">News</a></li>
   <li><ahref="contact.html">Contact</a></li>
   <li><ahref="about.html">About</a></li>
</ul>
     </div>
</div>


The complete html file with menu is available HERE

If we save and view our results we can see that the menu appears, but it is not exactly what we want. We need to style it so that it apears horizonatally accross the bottom of the header element. We will also give the menu items a background and border to make them stand out.