设置正文的宽度和边距后 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 {&nbsp; &nbsp; height: 296px;&nbsp; &nbsp; padding-top: 2px;}感谢大家的见解