<div style="width:100%; background-color: cornflowerblue">
            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; padding-top: 3px; padding-bottom: 3px; color: white; font-size: 20px;">About</a></li>
            </div>

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size: 20px;">Books</a></li>
            </div>

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href=""style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size: 20px;">Electronics</a></li>
            </div>

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size:20px;">Apparel</a></li>
            </div>   

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size:20px;">Activities</a></li>
            </div>   

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size:20px;">Student Life</a></li>
            </div>   

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom: 3px; font-size:20px;">Athletics</a></li>
            </div>    

            <div style="width: 13%; float: left; text-align:center; height:30px; background-color: cornflowerblue;"
            <li><a href="" style="text-decoration:none; color: white; padding-top: 3px; padding-bottom:     3px; font-size:20px;">Engagements</a></li>
            </div>   
    </div>

The ENGAGEMENT piece is not aligning up on my navigation bar...this is the only problem i am having

Well, the first issue I see is that you have 8 items each at 13% wide. Thats more than 100%, so it wont fit across your display.

Also, I'd recommendt hat you do not apply inline styles, as it makes it very difficult to make changes. You should consider using an external style sheet. Here is an example with internal styles. You also had some div elements that werent close properly and you really need to use the <ul> element in conjuction with the <li> element.

<!DOCTYPE html>
<html>
<head>
<style>
.nav {
width:100%; 
background-color: cornflowerblue;
}

.nav ul li {
width: 12%;
float: left;
text-align: center;
height: 30px;
background-color: cornflowerblue;
list-style-type: none;
}

.nav ul li a {
text-decoration:none; 
padding-top: 3px; 
padding-bottom: 3px; 
color: white; 
font-size: 20px;
}
</style>
</head>
<body>
  <div class="nav">
    <ul>
        <li><a href="#" >About</a></li>
        <li><a href="#" >Books</a></li>
        <li><a href="#" >Electronics</a></li>
        <li><a href="#" >Apparel</a></li>
        <li><a href="#" >Activities</a></li>
        <li><a href="#" >Student Life</a></li>
        <li><a href="#" >Athletics</a></li>
        <li><a href="#" >Engagements</a></li>
    </ul>   
  </div>
</body>
</html>

Thanks I actually figured out the problem took a minute !

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.