How to put a correct ahref
Solution 1:
Anchor tags are by default meant as inline elements. So instead of being the container, it's supposed to be the anchor inside the container. (Although that's mostly history now a days and your approach is fine, but still let me show you how you could structure your code that way and solve your problem )
.country {
height: 85vh;
width: 100%;
background-color: #fff;
font-family: sans-serif; /* remove for own style */
}
h1 {
padding-top: 45px;
text-align: center;
}
.grid-container {
display: grid;
grid-gap: 0px;
grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
grid-template-rows: repeat(2, 450px);
margin-top: 5%;
}
h2 a{
display: block;
padding-top: 95%;
padding-bottom: 15%;
text-align: center;
text-decoration: none;
font-size: 25px;
color: #fff;
background-size: cover;
background-position: center center;
background-color: lightgrey; /* Remove this, only used to show the elements */
border: solid 1px black; /* Remove this, only used to show the elements */
}
.history h2 a{
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/hist.jpg");
}
.culture h2 a {
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/culture.jpg");
}
.demo h2 a {
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/demo.jpg");
}
.geo h2 a {
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/geo.jpg");
}<section class="country">
<h1>Our country</h1>
<div class="grid-container">
<div class="history">
<h2><a href="#">History</a></h2>
</div>
<div class="culture">
<h2><a href="#">Culture</a></h2>
</div>
<div class="demo">
<h2><a href="#">Demographics</a></h2>
</div>
<div class="geo">
<h2><a href="#">Geographics</a></h2>
</div>
</div>
</section>Solution 2:
Just change the background of the "a" tag not the div
<a class="history" href="sub_history.html">
<div>
<p>History</p>
</div>
</a>
and for the "p" tag put the margin 90% (it's better)