img {
  display: block;
  height: 100%
  object-fit: cover;
}

object-fit опционально

Нельзя с уверенностью говорить, что та или иная информация никогда не пригодится. На таблицах до сих пор верстаются письма, а для обтекания картинки текстом лучше float ничего не придумаешь. Да, в реальных проектах затрагиваются вопросы актуальности, но зачастую они касаются новых технологий и их поддержки. В начале пути не нужно с этим заморачиваться, лучше изучите основы, сформируйте практическую базу, и - самое важное - проявите уважение к древности, столпам, на которых стоит веб, который мы знаем :)
Начните с htmlacademy, там годно изложены основы + много практики. Затем научитесь работать с флексами, они полны сюрпризов (один flex-grow: 9999 чего стоит) и ознакомьтесь с каналом WebDesign Master. Годный канал, который откроет вам много нового и сложного.
Ну а потом... gugol. Берите макеты и верстайте. Верстайте много, верстайте по-разному. К моменту, когда вы станете представлять интерес для работодателя, ваш стек будет выглядеть примерно так:
HTML5, CSS3, основы Js (умение хотя бы скопипастить код и понять, почему он мать его работает), настройка всяких плагинов с помощью jQuery, препроцессоры (less or sass), методы оптимизации верстки, Gulp (или другой сборщик) и мб что-то по мелочи.
Как-то так :)

Перевёрнутому блоку задай абсолютное позиционирование, rotate и и left: 0. Родителю relative, разумеется. Можно кстати и флексами сделать, но придется повозиться. Не думаю, что в этом есть особый смысл и что позиционирование – плохое решение.

Родителю display: flex, justify-content: space-between. Внутри 2 потомка - логотип и контейнер для элементов меню.