Вертикального выравнивания текста в навигационной панели

Question

EDIT: проблема решен

У меня возникли проблемы с выравниванием по вертикали два варианты меню справа с основным heading слева. Я хочу, чтобы дно обеих строк текста сидило друг с другом.

jsfiddle:

http://jsfiddle.net/f1pant3a/

Как так:

В настоящее время они сидят, как это:

Answer 1

Предоставление * {box-sizing: border-box;} исправляет проблему:

Или, если вы не хотите, чтобы дать его всем элементам, как это было предложено klaar, вы можете дать это:

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

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

Примечание: Это проблема с неправильным использованием width и свойствами модели коробки. Вы должны быть осторожны при выборе этих параметров.

Это будет небольшая иллюстрация, чтобы понять, как модель коробки работает:

http://blog.teamtreehouse.com/wp-content/uploads/2014/06/box-model-illustration.png