Button with hover option not working anymore after I used display flex for the button-CodePudding

I was using the hover on the button normally then when I used display flex in CSS for the button the hover option stops working. When I load the html page the first part of the button editing on CSS works but the part where there is #register-btn button:hover does not work. I am a beginner and I tried searching a couple of sites but I did not find anything similar to what is happening for me.

#box {
  width: 90%;
  height: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#box h1 {
  color: white;
  font-size: 3em;
  font-family: Arial;
  height: 11vh;
}

#box #register-btn {
  height: 45vh;
}

div:nth-of-type(2) {
  margin-left: 105px;
  align-self: flex-start;
}

#register-btn button {
  background: none;
  color: coral;
  border: 2.5px solid;
  padding: 1em 2em;
  font-size: 1.1em;
  font-weight: bolder;
  transition: color 2s, border-color 2s, box-shadow 2s, transform 2s;
}

#register-btn button:hover {
  border-color: #49c04fcc;
  color: white;
  box-shadow: 0 0.5em 0.5em -0.4em #49c04fcc;
  transform: translateY(-1.5em);
  cursor: pointer;
}

<section id="box">
  <div>
    <h1>MOVE YOUR EDUCATION <br>INTO THE NEXT LEVEL!</h1>
  </div>

  <div id=register-btn><br><button>Register here! </button></div>
</section>

Any help please?

CodePudding user response：

this works fine and I didn't see any problem on it. maybe you have conflict on other codes that prevents it from working. you need to provide more information about your error.

check this out here:

https://codepen.io/mrroshan/pen/JjJOBBP