htmlの下線の引き方に関して

なぜかREAD MOREの下線が左側の余計な部分にまで引かれてしまいます。改善策は無いでしょうか。

HTML
1<div class="head-nav">
2        <div class="head-cell">
3          <img src="img/pexels-photo-210307.jpeg">
4          <p>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
5          <div class="link">
6          　<a href="#">READ MORE</a>
7          </div>
8        </div>
9        <div class="head-cell">
10          <img src="img/pexels-photo-327494.jpeg">
11          <p>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
12          <div class="link">
13          　<a href="#">READ MORE</a>
14          </div>
15        </div>
16        <div class="head-cell">
17          <img src="img/pexels-photo-2187966.jpeg">
18          <p>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
19          <div class="link">
20          　<a href="#">READ MORE</a>
21          </div>
22        </div>
23      </div>

CSS
1.head-nav {
2  display: flex;
3  justify-content: center;
4}
5.head-cell {
6  max-width: 350px;
7  margin: 20px 10px;
8}
9.head-cell img {
10  width: 350px;
11}
12.head-cell p {
13  font-weight: bolder;
14}
15.link {
16  text-align: center;
17  margin: 20px auto;
18  text-decoration: underline;
19  color: #464646;
20}
21.link:hover {
22  text-decoration: none;
23}