按钮或文本未正确居中

Question

html,body {
  background-color: white;
  color: black;
  height:100%;
}

.jumbotron {
  background-color: red;
  width: 700px;
}

.container {
  height: 90%;
}

.btn-outline-primary {
  color: black;
  border-color: black;
}

.btn-outline-primary:hover {
  color: white;
  border-color: black;
  background-color: black;
}

.btn-outline-primary:onclick {
  color: white;
  border-color: black;
  background-color: black;
}

.row-title {
  text-align: center;
  background-color: green;
  margin-bottom: -20px;
}

.row-subtitle {
  text-align: center;
  margin-bottom: 10px;
}

.row-buttons {
  background-color: green;
}

.col-auto {
  background-color: blue;
  border-radius: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container d-flex justify-content-center">
  <div class="jumbotron my-auto">
    <div class="container">
    <div class="row justify-content-center row-title">
          <p>Very long text very long</p>
    </div>
    <div class="row justify-content-center row-subtitle">
        <p>Very long text very long</p>
    </div>
    <div class="row justify-content-center row-buttons">
        <div class="col-auto">
          <a class="btn btn-outline-primary" href="#" role="button">Button1</a>
        </div>
        <div class="col-auto">
          <a class="btn btn-outline-primary" href="#" role="button">Very long text very long</a>
        </div>
        <div class="col-auto">
          <a class="btn btn-outline-primary" href="#" role="button">Button3</a>
        </div>
    </div>
  </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

问题：带有文本“非常长的文本很长”（蓝色）的按钮显然与上面带有文本“非常长的文本很长”的两个<p>没有对齐（绿色）。问题是什么？大约相差5像素，但我不明白为什么。