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 и оставил проблемную часть кода c.

Это часть CSS, которая вызвала мою проблему:

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

Спасибо всем за ваши идеи