CSS :hover selector not working on button - html

Question

I'm working on an internet layout using CSS grid, and one of my grid areas is a navbar. I have tried to make buttons inside the navbar using divs. I have tried to use the :hover selector on the div to change the mouse to pointer, change the bg color, etc, but it isn't working.
When I force hover in chrome using dev tools it acts as if there were no code for hover on the button at all. I have tried to use the hover on the navbar itself, and it works but the strange thing is that it causes the hover to function correctly on the button as well. So, if I apply the same hover rules to the navbar, I can hover over the navbar or over the button and they both work.
For my assignment I have to use SCSS, so the code below is the compiled CSS code. Can the SCSS cause problems like this?
.myGrid {
display: -ms-grid;
display: grid;
grid-template-areas: "nav nav nav nav nav" background-color: white;
width: 85%;
margin: auto;
margin-top: 0px;
}
.myGrid section {
text-align: center;
-webkit-box-shadow: 0px 15px 20px black;
box-shadow: 0px 15px 20px black;
overflow: hidden;
}
#myNavMenu {
background-color: brown;
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 5;
grid-area: nav;
height: 100px;
margin-top: 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-box-shadow: 0px 0px 20px black;
box-shadow: 0px 0px 20px black;
}
.myButton {
background-color: white;
width: 100px;
height: 30px;
padding: 5px;
margin: auto;
border-radius: 8px;
z-index: 2;
}
.myButton :hover {
cursor: pointer;
}
<main class="myGrid">
<section class="navMenu" id="myNavMenu">
<h3>Nav</h3>
<div class="myButton" id="button1"> MyButton </div>
</section>
</main>

Answer 1

the space between .myButton and :hover causes all the mess.
.myButton :hover {
cursor: pointer;
}
Here is a working version https://jsfiddle.net/m0sc9ugb/