我有一個帶有按鈕的簡單 html：body {  background-color: White;  font-family: 'Roboto', sans-serif;  width: 800px;  margin: 0 auto;}div.container_body_content {  margin-top: 10px;  margin-bottom: 10px;  margin-left: 10px;  margin-right: 10px;}div.buttondiv {  width: 100%;  height: auto;  border: 1px solid black;  display: flex;  align-items: center;  justify-content: center;}.button {  background-color: #93d00f;  border: none;  color: black;  padding: 10px 20px;  text-align: center;  text-decoration: none;  display: inline-block;  margin: 4px 2px;  cursor: pointer;  border-radius: 16px;}.button:hover {  background-color: Green;}<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"><div class="container_body_content">  <div class="buttondiv">    <button class="button"><span style="color:White;font-family:'Roboto';font-weight:bold;">Test Button</span></button>  </div></div>當我注釋掉width: 800px; margin: 0 auto;正文時，按鈕工作正常，并在懸停時將背景顏色更改為綠色。但是，如果我width: 800px; margin: 0 auto;設置了正文，則該按鈕根本不起作用，這意味著懸停時背景顏色不會更改為綠色。我需要的是即使當我減小主體寬度時，按鈕也能具有懸停效果。我似乎無法弄清楚發生了什么事，我做錯了什么？謝謝奇怪的是，在代碼片段中它可以工作，但是當我在 Safari 或 Google Chrome 中打開它時，它卻不能，這就是我這邊的樣子：