Strimaxart

https://jsfiddle.net/8mtqrzbk/10/ примерно так - дальше по шагам - адаптировать текст - так как само svg резиновое - если что то не ясно спрашивайте

проверял в Chrome Firefox IE11 EDGE - работает везде

.services__item:hover {
    background-color: green;
}

.services__item:hover > .services__name {
    color: #fff;
}

.services__item:hover > .services__content {
    color: #fff;
}

.services__item:hover > .services__btn {
    color: #fff;
    border: 1px solid #fff;
}

картинку внутри блока можно сделать бэкграундом background-image: url() и менять ее при наведении

Компилирую ответ.

Это внутренний размер буквы. Прописано в шрифте при его разработке, это нормально.

Если так критично, то отрицательный margin с em вас спасёт:


Источник решения:
https://stackoverflow.com/questions/28809771/left-...