Vertical-align text within a nav bar

Question

EDIT: problem solved

I am having trouble vertically aligning the two menu options on the right with the main heading on the left. I want the bottom of both lines of text to sit flush with each other.

jsfiddle:

http://jsfiddle.net/f1pant3a/

Like so:

At the moment they are sitting like this:

Answer 1

Giving * {box-sizing: border-box;} fixes your problem:

Or if you don't want to give it to all the elements, as suggested by klaar, you can give this:

img {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Fiddle: http://jsfiddle.net/f1pant3a/5/

Note: This is an issue with improper use of width and box model properties. You need to be careful in selecting those.

This would be a small illustration to understand how the box model works:

_{(source: teamtreehouse.com)}