I'm relitavely new to HTML and have ran into this error after using display: flex. My buttons clickable area is about 10px above the actual button, and when I use inspect element, the button highlight says its above where the visible button is.
<body>
<h1 id="HomepageTitle" style="display: flex; justify-content: center; font-family: sans-serif; color: black;">CoderTom</h1>
<h2 id="HomepageHeader" style="display: flex; justify-content: center; font-family: sans-serif; color: blue;">Home</h3>
<div class="button-group" style="display: flex; justify-content: center;">
<a href="contactpage.html"><button style="position : relative; top: 50px; background-color: rgb(0, 255, 55); font-family: sans-serif; font-weight: 700; color: black; width: 100%; height: 100%;">Contact</button></a>
</div>
<script src="application.js"></script>
</body>