html - Adding border-bottom to nav and vertical align menu items -

i have navigation worked fine when didn't use custom bottom border on nav links, trying adding them , still have functionality before head in. want vertical align nav items 50px height , custom border on menu links, keep functional when in mobile size , de border in mobile view replaced normal underline declaration.

this had before adding custom bottom border , works:

--> fiddle before

and happens when adding custom bottom border when in mobile size menu items don't vertical align , background doesn't go down them:

--> fiddle after

<header> <nav>     <div class="mobile-nav">         <div class="nav-toggle"><i class="nav-icon"></i></div>     </div>     <ul class="left-nav">            <li class="home"><a href="#">pixelation</a></li>         </ul>     <ul class="right-nav">           <li><a href="#">work</a></li>         <li><a href="#">about</a></li>         <li><a href="#">contact</a></li>     </ul> </nav> </header>