设置正文的宽度和边距后 HTML <button> 不起作用

Question

我有一个带有按钮的简单 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 中打开它时，它却不能，这就是我这边的样子：

Answer 1

谜团解开了，我刚刚发现了一个流氓 DIV，我将其“放置”在我的 div.buttondiv 之上。在代码片段中它可以工作，因为我只附加了一个 MWE，并忽略了代码中有问题的部分。

这是导致我的问题的 CSS 部分：

#bar-graph tbody tr {

    height: 296px;

    padding-top: 2px;

}

感谢大家的见解