I'm experiencing an issue on my website where the clickable area of my two images/buttons, labeled Get Started and Learn More, is larger than the actual image itself. I've wrapped the images with anchor tags to link to separate pages, but for some reason, the clickable area extends beyond the visual boundaries of the images. Can anyone offer assistance in resolving this problem?
HTML
<!--button Holder-->
<div class="d-all m-all" id="buttonHolder">
<div class="d4-d6 m-all" id="getStarted">
<a href="contact.html#contactFormContainer"><img id="getStartedButton" src="images/get_started_button_vi.jpg" height="52"></a>
</div>
<div class="d7-d9 m-all" id="learnMore">
<a href="services.html"><img id="learnMoreButton" src="images/learn_more__button_vi.jpg" height="52" ></a>
</div>
<div class="m-all d-all">
<hr class="hrBreakTop"/>
</div>
</div><!--End button holder-->
CSS
/*Buttons*/
#buttonHolder{
}
#buttonHolder img{
margin-top:155px;
margin-bottom:10px;
display:block;
margin-left: auto;
margin-right: auto;
}
/*Reduce button sizes on mobile*/
@media all and (min-width:451px) and (max-width: 989px){
#buttonHolder img{
margin-top:65px;
width:45%;
display:block;
margin-left: auto;
margin-right: auto;
height:auto;
}
}
/*Reduce padding top on mobile*/
@media all and (min-width:0px) and (max-width: 450px){
#buttonHolder img{
margin-top:0px;
}
}
#getStarted{
}
#getStartedButton{
margin-right:20px;
}
/*Add top margin to button to prevent merging with VoipInnovations middle logo*/
@media all and (min-width: 0px) and (max-width: 989px){
#getStartedButton{
margin-top:15px;
}
}
#learnMore{
}
#learnMoreButton{
margin-left:20px;
}