CSS right border not fitting right

I'm just learning CSS and HTML and decided to have a go at making a mock up website. I'm having trouble with the border not meeting the end of the top bar. Other times I've had it go over.

http://ift.tt/1xDuyLZ

#topnav li {
float: left;
margin: 0;
padding: 16px 10px 10px 20px;
list-style: none;
color: white;
font-size: 1.2em;
border-right: solid #3E6F87 1px;

You can see this in the above link. If you could explain to me why this is happening and how I can avoid it in future I would be very grateful.