@media only screen and (min-width:1200px) {
.title .name {
color: blue;
}
}
Ты изначально не знаешь приоритетов селекторов, и удивляешься, что что-то не работает и бежишь использовать important, хотя приоритеты селекторов разжевываются сразу при знакомстве с CSS.
1. Убедись в правильности пути к картинке (F12).
2. Убедись в правильности размера картинки, так как она может иметь прозрачные края и быть больше размера блока, и в результате не будет видна.
Ну вот, вы имеете меню, а меню наверняка состоит из слов и равного количества блоков, значит вам надо смотреть не на расстояние между словами, а разбить ваше меню на блоки равного размера.
P.S. Названия пунктов меню имеют свойство меняться на другие, а значит к пиксел-перфект отношения иметь не могут.
P.P.S. Откуда вообще вылез пиксель-перфект в 2017...
Если можно обойтись сменой классов CSS, то меняйте классы, это проще. Если надо вносить изменения в DOM, то смело вносите. А кудахтанье про дороговизну операции не принимайте близко к сердцу. Это как споры ++i или i++, все пишут как хотят.
Откровенно говоря, ваш код негодный. Захочется что-то поменять, придется лезть в код и заново разбираться в этой мешанине.
Вжух и получаем более чистый и понятный: https://jsfiddle.net/profesor08/1rvsjoer/
Можно менять свойства CSS, но лезть в JS не придется.
Ссылка на сайт, где эта верстка или jsfiddle, или еще куда, где можно лично просмотреть и точно сказать. А так это вроде фоновая картинка 1 пиксель в ширину и 20 в высоту.
Это легко решается. Вам не надо подсчитывать кол-во символов и не надо беспокоиться о наличии тегов внутри блока. Вот вам мой пример: https://jsfiddle.net/profesor08/Lcs9433t/
Судя по скриншотам, тут нету никакой магии. У вас ничего не сделано по макету, у вас все отступы не соответствуют, цвета не соответствуют, даже размер фона не соответствует. Либо вы не понимаете что делать, либо вы скопировали сгенерированных стилей из фотошопа и слепили, а теперь, без понимания дела, удивляетесь.
Судя по примеру вы справились с задачей, осталось только подогнать размеры прямоугольников. Но накладывать на картинку таким образом - не лучший выбор. Вам следует либо рисовать на canvas, либо перенести большую часть в html/css код. Например сделать вот так много времени не займет: https://jsfiddle.net/profesor08/myg4zLo7/
Относитесь к подобным записям как к шаблонам, на их место, с помощью Javascript, будет вставлен сгенерированный кусок html. Браузер их никак не воспринимает, просто отображается их содержимое как текст. На CSS вы не получите к ним доступ. Выхватить и обработать их можно только на Javascript.