画像のリンク範囲が画像からずれる

前提・実現したいこと

模写コードを行なっています。
元のサイトはこちらです。
https://haniwaman.com/sample/part3/template_08/index.html
画像のリンク範囲が思い通りにいかず困っています。

発生している問題・エラーメッセージ

サイトの一番左上にあるDental Clinicのロゴにリンクをつけているのですが、画像の少し下にリンク範囲が設定されてしまいます。
aタグのpositionを解除すると正しい範囲に戻るのですが、上にずらすとリンク範囲が合わなくなってしまいます。
リンク範囲を適切に設定したいです。

該当のソースコード

HTML
1<header>
2  <div class="wrapper">
3      <a href="index.html" class="h-img">
4        <img src="siteTitle.png" alt="">
5      </a>
6      <div class="h1">
7        <p class="h1-1">“地域に根付いた歯科医院” デンタル クリニック</p>
8        <p class="h1-2"><i class="fa fa-phone-alt"></i></i>03-0000-0000</p>
9        <p class="h1-3">予約受付時間 10:00～19:30 <span>日祝 休診</span></p>
10      </div>
11      <div class="h-li">
12        <a href="index.html" class="hli11">
13          <p class="hli-ja">トップページ</p> <p class="hli-en">HOME</p>
14        </a>
15        <a href="#" class="hli21">
16          <p class="hli-ja">医院紹介</p> <p class="hli-en">CLINIC</p>
17        </a>
18        <a href="#" class="hli31">
19          <p class="hli-ja">診療案内</p> <p class="hli-en">SERVICE</p>
20        </a>
21        <a href="#" class="hli41">
22          <p class="hli-ja">院長・スタッフ紹介</p> <p class="hli-en">STAFF</p>
23        </a>
24        <a href="#" class="hli51">
25          <p class="hli-ja">アクセス</p> <p class="hli-en">ACCESS</p>
26        </a>
27      </div>
28    </header>
29  </div>

SCSS
1.wrapper {
2  width: 900px;
3  margin: 0 auto;
4}
5
6header {
7  margin-top: 75px;
8  height: 160px;
9
10  .h-img {
11    position: relative;
12    top: -20px;
13  }
14
15  .h1 {
16    text-align: right;
17    color: #515151;
18    position: relative;
19    top: -115px;
20
21    .h1-1 {
22      font-size: 10px;
23    }
24    .h1-2 {
25      font-size: 25px;
26      margin: 0;
27      i {
28        margin: 8px;
29      }
30    }
31    .h1-3 {
32      float: right;
33      padding: 7px 15px;
34      width: 181px;
35      font-size: 10px;
36      border: 1px solid #D6D6D6;
37      margin: 0em;
38      span {
39        color: #B22C00;
40      }
41    }
42  }
43  .h-li {
44    width: 900px;
45    display: flex;
46    position: relative;
47    top: -90px;
48    background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%);
49    border: solid 1px #6CC6C4;
50    border-radius: 6px;
51
52    a {
53      width: 20%;
54      text-align: center;
55      border-right: #71C9C7 solid 1px;
56      border-left: #99E1DF solid 1px;
57      text-decoration: none;
58      color: white;
59
60      &:hover {
61        opacity: .7;
62        background-image: linear-gradient(rgb(108,198,196) 0%,rgb(156,227,225) 100%);
63      }
64
65      .hli-ja {
66        margin: 17px 0px 0px;
67        font-size: 15px;
68      }
69
70      .hli-en {
71        margin: 0px 0px 17px;
72        font-size: 10px;
73      }
74    }
75  }
76}