Заголовок и текст вопроса совершенно никак не согласовываются.
А по скрину - это ужасно. Семантически, правильнее делать такую структуру:
<div class="column">
<div class="title">Заголовок</div>
<div class="text">Текст</div>
</div>
И стилизировать так:
/* любые div'ы по умолчанию имеют такую ширину, если свойства позиционирования или обтекания имеют дефолтные значения, но для проформы обозначим явно */
.column {width: auto; padding: 15px;}
.title, .text {width: auto;}
Это раз. Два: оформление ссылок под логотипом при наведении на них - громкий ужас. Нельзя так делать, это некрасиво. Зелёным цветом вообще нужно пользоваться очень осторожно, а уж тем более таким тёмным. А вот, заполнение цветом одновременно с подчёркиванием... Советую обходиться либо более тусклыми тонами синего или серого, либо простым подчёркиванием. Плюс, на заполнение цветом у вас
transition срабатывает, а на подчёркивание - нет. Чтобы такого не было, нужно указывать границу сразу, но с прозрачным цветом (
border-bottom: 2px solid transparent;), а уже в псевдоклассе :hover менять только цвет границы.
Плюс, ссылка 'Подробнее' никак не выделяется, если на неё навести мышь, а в отличие от блока с текстом. Надо сделать наоборот.
Средний
Простой
