Display: Grid problems with A size

My problem is simple, I have buttons which are simple <h1> and i want them to link me to the other pages with <a>. Simple as that, but when I use

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

I get a problem where the a tag takes much more space than i would like it to. Here is the code for the classes header and buttons

.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%;}

And here is how the HTML file looks:

        <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

So my question is: how do I make the a's size to be the same as the h1's size? Any improvements to the code are welcomed too! Thanks for the help!