My anchor tags borders are outside of the parent nav element

Here's the problem, the nav elements can extend outside of their parent element. Image showing the borders of the two elements and the problem.

<nav>
    <a href="">Latest News</a>
    <a href=""> Upcoming Events</a>
    <a href="">Official </a>
    <a href="">Domestic Rowing</a>  
    <a href="">High Performance</a>
    <a href="">Coaching</a>
    <a href="">Resources</a>
</nav>

the css:

nav {
    padding: 0em 1em 0 0;
    border-bottom: 1px solid white;
}
.head nav a{
    padding: .5em .5em;
    font-size: .9em;
    transition: all 0.3s;
    border-bottom: 1px solid transparent;

}

.head nav a:hover {
    border-bottom: 1px solid white;
}

Thanks in advance, I have this problem fairly frequently and can never figure out a solution.