border-bottom pushes my content

#nav{
background-color:#3300FF;
float:right;
margin:0px;
padding:0 0 5px 0;
width:50%;
}

#nav{
margin:0px;
padding:25px 0 0 0;
}

#nav li{
display:inline;
}

#nav a{
color:#ffffff;
float:left;
margin:0 30px 0 0;
text-decoration:none;

}

#nav a:hover{
border-bottom:2px solid #fb1455;
margin:0 30px 0 0;
color:#000000;

}

		<div id="nav">
			<ul>
				<li><a href="#"><b>Home</b></a></li><li><a href="#"><b>About</b></a></li><li><a href="#"><b>Register</b></a></li>
			</ul>
		</div>