I'm facing an issue with a button placed inside my jumbotron. The button is supposed to link to a specific section within the page, but it's unresponsive. Even hovering over it shows no interaction. Strangely, if I move the button outside of the jumbotron, it functions properly. How can I make it work within the jumbotron? Both the button and the jumbotron are created using bootstrap. I've applied z-index to both the overlay and the jumbotron, though I'm not sure if that is relevant.
<div class ="jumbotron jumbotron-fluid" id ="jumbo">
<div class ="container" id ="jumbo-overlay">
<h1 id ="jumbohead"></h1>
<div id ="viewButt">
<a class="btn btn-lg btn-outline-secondary" href="#aboutme" id ="viewworkButt"></a>
</div>
</div>
</div>
#viewButt {
padding-top: 300px;
display: flex;
flex-direction: row;
justify-content: center;
cursor: pointer;
}
#viewworkButt a:hover {
background-color: yellowgreen;
}