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

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是我“放置”在div.buttondiv之上的。在代码段中它可以工作，因为我仅附加了一个MWE并忽略了代码中有问题的部分。

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

#bar-graph tbody tr {
    height: 296px;
    padding-top: 2px;
}

感谢大家的见解