Why do button and anchor have different widths with the same styles

Question

I have what I think is the same CSS applied to a <button> and a <a> element, but they have different widths. They are both display:flex

Does anyone know why the <a> isn't the same size as the <button>?

Here is the code: https://codepen.io/anon/pen/WqGveO

.btn {
  height: 43px;
  padding: 0 25px;
  background: white;
  color: #54565a;
  border: 2px solid #54565a;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 900;
  font-family: 'Helvetica';
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

<div class="page-section__inner">
  <button class="btn">Standard Button</button>
  <button class="btn btn--centered">Centered Button</button>
  <a href="#0" class="btn">Standard Btn as a</a>
  <a href="#0" class="btn btn--centered">Centered Button as a</a>
</div>