Как мне масштабировать эти изображения в заголовке моего веб-сайта? ⇐ CSS

[Anonymous]

У меня очень мало опыта программирования, поэтому я буду рад любым отзывам. Я пытаюсь стилизовать 2 изображения (одно jpg и одно gif) с помощью css, чтобы они оба появлялись над моей панелью навигации, внутри красного контейнера на первом снимке экрана. Конечная цель — создать заголовок/панель навигации, которые масштабируются как единое целое (см. четвертый снимок экрана).
Если у вас возникнут вопросы, дайте мне знать.
Я пытался использовать rem/vh/vw вместо px/percentages, но и тогда изображения не масштабировались.

Код: Выделить всё

My Portfolio
[*]






[img]assets/icon1.jpg[/img]
[img]assets/header.gif[/img]






[list]
[url=#portfolio]portfolio[/url]
[*][url=#studio-work]studio work[/url]
[*][url=#personal-work]personal work[/url]
[*][url=#about]about[/url]
[/list]

Код: Выделить всё

/* DESKTOP NAV */

.header {
width: 100%;
height: 30vh;
display: block;
background-color: gray;
}

.inner_header {
width: 80%;
height: 100%;
display: block;
margin: 0 auto;
background-color: red;
}

.icon_container {
max-height: 100%;
max-width: 100%;
float: left;
/* vertical-align: middle;
border-radius: 50%; */
}

.title_container {
height: 100%;
display: table;
float: right;
}

nav, .nav-links {
display: flex;
}

.navigation_bar {
width: 100%;
height: 10vh;
display: block;
background-color: rgb(101, 101, 101);
}

nav {
justify-content: space-around;
align-items: center;
height: 4rem;
}

.nav-links {
gap: 7rem;
list-style: none;
font-size: 1.25rem;
}

Заголовок веб-сайта выделен серыми и красными прямоугольниками-контейнерами. Базовая панель навигации находится ниже, а сверху — пустое красное поле.
Текущее состояние заголовка моего веб-сайта со всеми включенными слоями.
Идеальный вариант. конечный результат для заголовка моего веб-сайта: логотип, за которым следует анимированный заголовок, и панель навигации по центру под обоими.

Подробнее здесь: https://stackoverflow.com/questions/792 ... tes-header