More help with my portfolio page requested

Code Feedback
1

My portfolio page is now mostly functional, but there are a few things that I am not really happy with.

The Codepen URL is:

 http://codepen.io/mshapiro/full/BzAvgy/

  1. I can’t seem to get the text in the buttons on the navbar (actually links styled as buttons) to be vertically aligned. The horizontal alignment is fine, but not the vertical alignment.

  2. The only way that I could set the color on the button text was to explicitly set it in the ‘style’ of each link (as I did for the ‘contact’ button). I tried to set it in the .btn-custom class, but it does nothing. Border, background, margin and height all work, but not color. I would like to be able to set it similarly to the background color. That way I could change the text color along with the background color when the mouse hovers over the button. Also, .btn-custom:hover seems to be completely ignored.

Any other comments and critiques will be appreciated. I know that the page is rather bland and I may try to spice it up a bit later. Right now I mainly want to get it functioning properly. Aesthetics can come later.

2

Add this to make the nav-btns vertically center
a.btn.btn-custom { line-height: 6px; }

and for the color thing, add an attribute and add !important like shown below

color: #00ff00 !important;
It overrides the bootstrap default attributes

3

Thanks! That did it.

I had tried using !important before and it took a few moments to figure out why it was working now, but not previously. I had originally attached the class to the list item, not the link, so, of course, Bootstraps link color still had presidence. Once I added the class to the link !important worked. Great.

The vertical spacing is working, too, but I don’t really know why in this case. Can you explain just what it is doing and why that works? Was it centering the line of text in the button, but it thought that the line was higher (somewhere around 19 or 20 pixels)?