我正试图把下面给出的5个按钮放在我的代码中，但是在尝试这样做的时候，悬停的按钮正在将按钮推到它的左边，更左边。我想这可能是填充的问题，但我尝试了很多方法，但没有一个奏效。

null

.buttons {
  border-radius: 4px;
  background-color: white;
  color: #003466;
  border: 0.8px solid #707070;
  padding: 6px 16px 6px 16px;
  margin-right: 1rem;
}

.buttons:hover {
  border: 2px solid #707070;
  padding: 5px 14px 5px 14px;
}

<div style="padding-left: 5rem; padding-top: 5rem;">
  <div>
    <p>Button Not Working Properly</p>
  </div>
  <button class="buttons" type="button">Edit</button>
  <button class="buttons" type="button">New</button>
  <button class="buttons" type="button">Preview</button>
  <button class="buttons" type="button">Export</button>
  <button class="buttons" type="button">Delete</button>
</div>

null