why my html element height stretches across container?

Question

Link and other elements stretch vertically even without

align-items:stretch;

Because of it i can't get my elements centered my css code

.secondary-heading {
  font-size: 3.8rem;
  color: #233240;
  font-weight: 700;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  border: solid 1px red;
}

and html

<h1 class="secondary-heading">
          <a href="/ourcars.html" class="icon-link">
            <ion-icon name="chevron-back-outline" class="icon-link"></ion-icon>
          </a>

          Rent a car
        </h1>

I tried align-items:center or flex-start but it doesnt work.When the icon it self is ok but when i wrap it in link element it stretches

Answer 1

.secondary-heading {
  font-size: 3.8rem;
  color: #233240;
  font-weight: 700;
  margin-bottom: 1.2rem;
  display: flex;
  justify-content:space-between;
  align-items:center;
  border: solid 1px red;
}

img{
   display:block}

a{
text-align:center;}

#x{
visibility:hidden;}

<h1 class="secondary-heading">
          <a href="/ourcars.html" class="icon-link">
            <img src='https://via.placeholder.com/25'>
          </a>

          Rent a car
          <a id='x' >  <!--add this for spacing -->
            <img src='https://via.placeholder.com/25'>
          </a>
        </h1>