Смещение блоков при масштабировании.

[Eugenice]

Добрый вечер, уважаемые форумчане.

Я пишу с нуля свой первый сайт и у меня на этапе верстки возникла проблема с размещением меню, что вкладывается в блок header. При масштабировании страницы, меню меняет свои значения: либо оно вылазит за пределы блока-родителя, либо не доходит до его границ (появляются неприятные белые полосы). Возникает вопрос, как зафиксировать меню так, чтобы масштабирование не меняло расположение его блоков?

+ при масштабе в 100% приходится использовать не целочисленное значения в отступах nav ul li a {padding:41.6px 50px;} для того, чтобы избавиться от белой линии под блоком (методом подгона). Хочется понять, как можно "вылечить" и этот дефект. Раз высота шрифта 15px, а высота блока header 100px, то отступы сверху-снизу должны быть (100-15)/2=42.5. Откуда тогда берется 41.6 не совсем понятно. 

Прикладываю скриншот https://yadi.sk/i/HOGOClqb3Gmy2k с описанием для лучшего понимания ситуации, а сам код прикрепил к сервису codepen:

С уважением, Евгений.

[Endorphin]

Извините конечно, но я бы на вашем месте чем запариваться с масштабированием, которым редко кто пользуется и то только на мобильных версиях наверно сейчас, или на криво сверстанных сайтах, подумал бы об изучении именования блоков) Может вы и знаете конечно, просто так сверстали для примера, но эти каскады в CSS не весело) Я уже верстаю не первый проект, да и на курсах нам даже близко не рассказывали об этом)