HPのナビゲーションが文字上でリンクできない

HTMLとcssでHPを作成していて、aタグでリンクできるようにコードを記述しましたがプレビューすると
写真のハートマークあたりをクリックしないとリンクされません。
コードに問題があるのでしょうか？

分かることがありましたら回答よろしくお願いします。

HTML
1 <nav class="menu">
2                <ul>
3                    <li><a href="#home">ホーム<br><span>Home</span></a></li>
4                    <li><a href="#contact">お問い合わせ<br><span>Contact</span></a></li>
5                    <li><a href="#access">アクセス<br><span>Access</span></a></li>
6                    <li><a href="#medical">診療について<br><span>Medical</span></a></li>
7                    <li><a href="#opentime">診察時間<br><span>Consultation time</span></a></li>
8                </ul>
9            </nav>
10

css
1.menu ul{
2    margin: 0;
3    padding: 0;
4    width: auto;
5}
6
7.menu ul li a{
8    font-size: 2vw;
9    text-decoration: none;
10    padding: 0 25px;
11    display: block;
12    text-align: center;
13    color: #333232;
14    font-weight: 600;
15}
16
17.menu ul li a:hover{
18    color: #eeeeee;
19}
20
21.menu ul li a span{
22    font-size: 15px;
23    display: block;
24}
25
26/* ナビゲーションを横に並べる */
27.menu ul:after{
28    content: "";
29    display: block;
30    clear: both;
31}
32
33.menu li{
34    float: left;
35    width: auto;
36}
37
38/* ナビゲーションを右端へ移動 */
39.menu ul{
40    float: right;
41}
42
43