Topnav被边界右边弄乱了

Question

好吧我正在尝试制作一个用链接之间的线分隔的标题。现在我使用border-right然后我搞砸了100％。我将每个链接的宽度更改为19％，但之后我不会填满整个100％。我尝试过轮廓，但似乎没有办法只将轮廓放在右侧。我确信我不是第一个遇到这个问题的人。什么是最好的解决方案？

＆＃13;

＆＃13;

a {
	color: black;
}
#logoDiv {
	padding: 35px 0 35px 35px;
	background-color: #999;
}
#topNavUl {
	height: 30px;
    list-style-type: none;
	padding: 0 0 0 0;
}
#topNavUl li {
	height: 100%;
	width: 19%;
	float: left;
	text-align: center;
}

#topNavUl .notLast{
	border-right: 1px solid grey;
}

＆＃13;

<div id="topNavDiv">
		<ul id="topNavUl">
			<a href="index.html"><li class="notLast">Home</li></a>
			<a href="Clients.html"><li class="notLast">Clients</li></a>
			<a href="Projects.html"><li class="notLast">Projects</li></a>
			<a href="Coworkers.html"><li class="notLast">Coworkers</li></a>
			<a href="Contact.html"><li id="lastTopNavLi">Contact</li></a>
		</ul>
	</div>

＆＃13;

＆＃13;

＆＃13;