Алексей Дубровин

Загуглить как правильно делать media ?

Если сделать Print Screen, то они не видны на скриншоте

дело не в браузере или верстке.
Чистите систему от вирусов.

Никак. Это не зависящие от браузера обстоятельства.

Обычно всегда в таких случаях что-то типа такого делаю
https://codepen.io/alekcena/pen/eYWeYPy

lerny, Мб это

Анимация может происходить только если есть от чего отталкиваться.
У вас нету первоначального значения для height
Иначе это просто переключения значений с ничего на 450px
Установите для img значение (px) и всё заработает.

Нормально никак.
Это не решение.
Если вам мешает скролл дело не в нём а в том как устроен ваш код.
Скролл вычитает из зоны просмотра 20px

Понял что проблема в резиновой картинке. Больше вообще ничего не понял

1) Загуглить что такое адаптив.
2) Загуглить что такое media запросы
3) Загуглить rem/em.
4) Загуглить как адаптировать блоки.
5) Загуглить как адаптировать текст.
6) Загуглить как адаптировать изображение.

Возможность редактирования текста и изображения решается с помощью css.
Но если вы в изображение 100x100px загрузите картинку в 10mb. Это уже совсем другая история

1) Загуглить "что такое кодировка цвета, и какие они бывают"
2) Загуглить "что такое прозрачность"
3) Преисполниться
4) Загуглить "Как научиться писать, чтобы другие тебя понимали"
5) Преисполниться

Делите блок на 2 части с помощью флекса
Левые вкладки и картинка.
Далее левые вкладки тем же флексом.

Если есть возможность то лучше спросить у дизайнера.
Адаптив подразумевает корректное отображение на всех устройствах.

Правильно ли будет уже при таком разрешении сделать меню гамбургер?

Никто не мешает и сразу делать меню гамбургером, правильно или неправильно можно реализовывать.
Чаще всего если дают такой макет, и нет возможности пообщаться с дизайнером, то:

1. Регулировка размеров отступа
   
2. Уменьшение размера шрифта
   
3. Скрытие элементов
   

Всё делается интуитивно. Что кажется лучше то и делается.
Думаешь что бургер будет смотреться нормально, почему нет.