Bootstrap change font size of elements problem

I try to make a portfolio page using Bootstrap 3. Elements in my navbar looks fine but when I try to enlarge the font size it’s getting very weird. In this example I just set font-size to 25px; and this is what happens:


Text is no longer fitting well into navbar container. When hovered over, the background color is also shifted as on the image above. Even if I manipulate with margin and padding. How to set the Css to make text align and background color verticaly centered (vertical-position: center doesn’t work)?

Link to the code on codepen please.

I make it in WebStorm now. Here’s the code in codePen.