显示：A尺寸的网格问题

Question

我的问题很简单，我的按钮很简单<h1>，我希望他们将我链接到<a>的其他页面。很简单，但是当我使用

时

<a href="#"><h1>Index</h1></a> 

我遇到的问题是，标签占用的空间比我想要的多得多。 这是类标题和按钮的代码

.header{display: grid; grid-template-columns: 1fr 3fr; text-align: center; grid-gap: 20vw; } 
.buttons{display: grid; grid-template-columns: 0.8fr 0.8fr 0.8fr 0.8fr; grid-gap: 3.33%;}

以下是HTML文件的外观：

        <div class="wrapper">
        <div class="header">
            <div>
                <img src="assets/MMLogo.png">
            </div>
            <div class="buttons">
                <a href="index.html"><h1>Index</h1></a>
                <h1>Clients</h1>
                <h1>About Us</h1>
                <h1>Offices</h1>
        </div>
    </div>

Browser Inspection on h1 Browser Inspection on a

所以我的问题是：如何使a的尺寸与h1的尺寸相同？ 我们也欢迎对代码进行任何改进！ 谢谢你的帮助！