Как сделать что бы блок с жирным текстом не расталкивал соседние блоки?
парочка более менее вариантов, что пришли сходу:
1. Использовать подходящий для этих целей шрифт: https://ux.pub/editorial/proportsionalnyie-shrifty...
2. Сделать хак на псевдоэлементах. По умолчанию текст показывается из элемента, а при наличии класса active устанавливается visibility: hidden, и поверх абсолютно спозиционированный текст в том же месте где и обычный текст из псевдоэлемента, но уже жирный. Чтобы не прописывать для каждого псевдоэлемента свой текст в css можно воспользоваться функцией attr()
3. Ну и вариант который есть всегда - сказать дизайнеру\заказчику что это не лучший вариант выделения для конкретно данного меню и предложить другой. Например, подчёркивание, а не выделение жирным.
4. Сделать жирность через text-shadow
Никак, у вас динамический размер шрифта, который увеличивается, когда становится толще. Можно либо фиксированный размер блока задать, либо заменить эффект толщины на смену цвета или тени.