i am trying to resize a image(.logo) placed in a tag. But whenever i make the image smaller, the image is get small in size but the size of tag remains same. And the space between the image and next element (h1) becomes disturbed.

This content is a child of Header. And i am trying to create it as a navigation bar.

The code is here...

HTML

<header><a href="index.html"><img src="Images/Genshine_logo.png" class="logo"></a><a href="index.html"><h1>Characters Cards</h1></a></header>

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 Queries

@media (max-width: 480px) {    header {        height: auto;        padding: 10px;    }    .logo {        width: 55%;        height: auto;    }    h1 {         font-size: 5vw;        margin: 0;    }}

enter image description here

I was expecting that there will be no unwanted gap between the image and h1.

I even tried to resize the tag but that also won't work.