current page width inconsistent - html

Question

I have a "current" class which highlights the current page. And it works as far as highlighting the current page. With the padding I've added the highlighted area covers the a-element and go towards the top of the page which is what I want it to do. But each highlighted area is the width of the a-element and since each a-element has a different number of characters within, the widths are inconsistent.
To correct this I gave the a-element a display: block. This correction did give a consistent width, but now the highlighted area goes down towards the page as opposed to towards the top of the page as I wanted it.
How can I get a consistent width of highlighted area to go up towards the top of the page?
nav {
margin: 100px auto;
}
.top-nav {
width: 785px;
color: dimgrey;
text-align: center;
margin: 0 auto;
}
.top-nav li {
width: 150px;
float: left;
margin: 0 3px;
}
.top-nav a {
color: dimgrey;
width: 150px;
}
.current {
padding: 150px 0px 5px 0px;
background-color: #fab938;
color: white;
}
span.fa-bath {
font-size: 50px;
margin-top: -45px;
margin-bottom: 10px;
border-radius: 100%;
padding: 20px;
background-color: #fab938;
}
<nav>
<ul class="top-nav">
<li>Quem Somos</li>
<li>O Que Fazemos?</li>
<li><span class="fa fa-bath"></span></li>
<li>Donations</li>
<li>Contact</li>
</ul>
</nav>

Answer 1

I would change the way you build you nav.
Instead of using a float use a inline-block on the LI.
Next to that you can use vertical-align: middle; to align the items from the middle or use top/bottom.
also your nav container is not fitting the size of the 5 Li you are using.
https://jsfiddle.net/wyrscn48/1/
nav {
margin: 100px auto; }
.top-nav {
width: 935px;
color: dimgrey;
text-align: center;
margin: 0 auto;
}
.top-nav li {
width: 150px;
margin: 0 3px;
display: inline-block;
vertical-align: top;
}
.top-nav a {
color: dimgrey;
width: 150px; }
.current {
background-color: #fab938;
color: white; }
span.fa-bath {
font-size: 50px;
margin-bottom: 10px;
border-radius: 100%;
padding: 20px;
background-color: #fab938;
}