Jan van Eyck

Изображение можно разместить в такой же контейнер, что и для хедера и задать ему overflow-x: visible. Если изображение именно как img будет добавляться на страницу.

Вариант выше не годится.
во 1х, Фон не монотонный - значит эта накладка будет выглядеть на нем именно как накладка (или костыль).
во 2х, Если добавить бордер, то становиться вообще все прискорбно.

Надо clip-path использовать. И кажется еще был какой-то вариант(ы).
В книге Леа Веру "Идеальные решения повседневных задач" описано, как подобное реализовать - читайте.

Ты в ворде чтоли пишешь код? : )
Используй нормальный редактор кода. Там обязательно есть горячие клавиши на комментирование (и много др. полезного). Редактор сам разберется где какой синтаксис использовать.

Нет, не стоит.
<div class="container"> и <img> - избыточные элементы.
Для чего нужен .container, если сам header является контейнером?..
Логотип одним элементом лучше сделать: div.logo, изображение фоном. Или даже лучше a.logo - для ссылки на главную.

Подскажу возможную реализацию. Все как вы просили ; )

Элемент с текстом спозиционировать абсолютно и "прилепить" его к правому-нижнему углу строки, задать ширину, равную общей ширине 3-х ячеек. Для строки добавить position: relative, чтобы можно было к его границам привязаться. Чтобы выделить место под этот (сдвинутый) элемент, можно добавить padding для строки/ячейки.
Если объем этого текста в разных строках будет сильно отличаться, то придется подобрать оптимальную высоту (что-то среднее). Длинные тексты - скрывать, что не помещается через (...) Если видимость всего текста критична, то добавить скролл и застилизовать едва заметную полосу прокрутки. Хотя вроде как затронет скролл для страницы в целом :-/

Дальше уже требуется отладка через реальный код, на словах и на пальцах навряд ли получится придумать законченное решение (если конечно не владеете версткой на божественно-запредельном уровне).

Разумеется это хак (слово не пугает?..). А как иначе, задача не тривиальная.
Для кого-то хак, для другого костыль - вопрос отношения.

Если подобрать оптимальную ширину блоков не позволяет только опасения по поводу различного рендеринга текста в разных браузерах/платформах - то это слабый аргумент против такого варианта :) Потому что различия будут незначительными - ничего не поломается.

<br>и правда моветон, рудимент из первобытных html-времен. А-ля флоат.

Размеры в состоянии hover 145x27. А в обычном состоянии сколько?? Судя по видео там обычная высота элемента где-то 16px, а потом становится резко 27! Но transition не на высоту ведь назначен - еще бы ему не дрожать. Вы ведь хотите чтобы плавно менялись размеры?..

По наведению меняется background-color, а transition указан на background в целом - не слишком-то грамотно (а вообще работает оно так?..)

Еще и бордер появляется по наведению. Если у элемента нет box-sizing: border-box, то и тут будет "колбасить".

В целом код выглядит так, будто автор не до конца понимает (или совсем никак), как устроен CSS, но хочется (или нужно) сделать самостоятельно. Прямо как я в JS =))

Selectel.
Низкая стоимость и гибкая система оплаты (никаких фиксированных тарифов; оплата взимается только за объём хранимых данных и исходящий трафик), наличие CDN и гибкой системы настроек параметров контейнеров и отдаваемых файлов.