Связь между тегом и изображением в отзывчивости CSS ⇐ CSS

[Anonymous]

Я пытаюсь изменить размер изображения (.logo), помещенного в тег. Но всякий раз, когда я уменьшаю изображение, оно становится меньше по размеру, но размер тега остается прежним. И пространство между изображением и следующим элементом (h1) нарушается.
Этот контент является дочерним элементом заголовка. И я пытаюсь создать его как панель навигации.
Код здесь...
HTML

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

[url=index.html]
[img]Images/Genshine_logo.png[/img]
[/url]
[url=index.html]
Characters Cards
[/url]

CSS

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

header {
background-color: #4B002C;
color: #000000;
padding: 10px;
height: 14vh;
width: 100%;
display: flex;
align-items: center;
}

.logo {
height: 12vh;
width: 26vw;
}

h1 {
margin: 2px 0 0 40px;
padding: 0vh 68px 0px 0vw;
font-weight: bold;
font-size: 5vw;
text-align: center;
color: #ffc660;
}

Медиа-запросы

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

@media (max-width: 480px) {
header {
height: auto;
padding: 10px;
}

.logo {
width: 55%;
height: auto;
}

h1 {
font-size: 5vw;
margin: 0;
}
}

введите здесь описание изображения
Я ожидал, что между изображением и h1 не будет нежелательного разрыва.
Я даже пытался изменить размер тега, но это тоже не сработало.

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