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>
property top: 50px in anchor tag moves element up 50px. I guess you wanted to give it to parent (.button-group)
I recommend you to style the tag like a button and add ' display: block ' Also remember to reset default styling of the browser