Relation between <a> tag and image in CSS responsiveness

Question

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.

Answer 1

Remove the width: 26vw; of the img. The img is this width, but the image inside is contained inside to avoid deformation or crop.
If you set both height and width you can get things like this, if you only set one, the other will adapt to avoid deformation or crop. Also, stop using vh and vw in this context, use px instead or rem. Here is an example:

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    header {
      background-color: #4B002C;
      color: #000000;
      padding: 10px;
      height: 60px;
    }
    .header-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: 100%;
    }

    .logo {
        height: 40px;
        object-fit: contain;
    }

    h1 {
        font-weight: bold;
        font-size: 25px;
        text-align: center;
        color: #ffc660;
    }

    @media (min-width: 576px) {
        header {
            height: 80px;
        }

        .logo {
          height: 60px;
        }

        h1 { 
          font-size: 50px;
        }
    }
.logo-container {
  position: absolute;
  top: 0;
  left: 0;
}

<header>
    <div class="header-wrapper">
      <div class="logo-container">
        <a href="index.html">
          <img src="https://picsum.photos/200/300" class="logo">
        </a>
      </div>
      <div>
        <a href="index.html">
          <h1>Characters Cards</h1>
        </a>
      </div>
    </div>
  </header>

Adapt the sizes and media queries to your need.