I'm trying to move the border-bottom down so more of my active-link can be seen.

.navigation a.active-link {
    background-border: #red;
    border-style: solid;
    border-bottom: solid white;
    color: black;
    padding:10px;
}


#navigation {
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  word-wrap: break-word;
  padding-top: 10px;
  margin-bottom: 15px;
  overflow: hidden !important;
  white-space: no-wrap;
  text-overflow: clip;
  height: 26px;
}

The problem is when I try and increase the padding-bottom it stacks my text and I'm trying to avoid that.

https://jsfiddle.net/akn5r7y5/2/