Display: Grid problems with A size

156
April 17, 2018, at 05:49 AM

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!

Rent Charter Buses Company
READ ALSO
How to always have a header on top of each page when printing?

How to always have a header on top of each page when printing?

In my website, I have a really tall table spanning multiple pages when printingIs there a way I can have the header row, show on top of each page when printing?

158
Put actual date (dd/mm/yyyy) to a css variable with HTML

Put actual date (dd/mm/yyyy) to a css variable with HTML

I have a variable DataTime named dataalta (public DateTime? dataalta { get; set; }), that I'll put on a database, and i want to introduce the actual date to itBut the create is on a html (this is a website), and I use @Html

178
There is a way to debug edge browser on surface?

There is a way to debug edge browser on surface?

I need to develop a web on Angular 5 compatible with edge on surface but as expected some styles are breaking on Edge

164