I'm struggling with styling my CSS navigation bar. The last list item is moving to a second line, which really messes up the look of my website. Can someone take a look at my code and point out what I'm doing wrong? Thank you in advance.
HTML:
<div id="HorizNav">
<ul>
<li><a href="#" id="horiznav-first">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#" id="horiznav-last">Social Media</a></li>
</ul>
</div>
CSS:
#HorizNav ul {
float: right;
text-align: left;
width: 465px;
height: 50px;
background: #ff0000;
color: #fff;
font-size: 12px;
}
#HorizNav ul li { float: left; }
#HorizNav ul li a {
display: block;
text-decoration: none;
background: #aa00ff;
color: #fff;
width: 92px;
height: 20px; /* height minus padding-top */
padding-top: 30px;
padding-left: 10px;
border-right: 1px solid #fff;
}
#HorizNav ul li a:hover {
background: #fff;
color: #aa00ff;
}
#HorizNav ul li a#horiznav-last { display: none; }