Почему на разных разрешениях экранах разная ширина border

.btn {
    border-radius: 15px;
    display: block;
    font-size: 16px;
    height: 50px;
    margin: 0 auto;
    padding: 2.2px 2.4px 2.4px 2px;
    font-weight: 600;
    width: 99%;
    z-index: 2;
}

.red-hover-btn {
  --c1: #730000;
  --c2: #FF0000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 34px;
  transition: background 1s;
  background: linear-gradient(294deg, var(--c1, #730000), var(--c2, #FF0000) 50%, var(--c1, #FF0000)) var(--x, 0)/200%;
  border-radius: 15px;
  color: #fff;
}

.btn span {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #ffffff;
    border-radius: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.text-hover-red {
  --c1: #730000;
  --c2: #FF0000;
  background: linear-gradient(294deg, var(--c1, #730000), var(--c2, #FF0000) 50%, var(--c1, #FF0000)) var(--x, 0)/200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  transition: 1s;
}

<a class="btn red-hover-btn" href="#">
  <span>
    <p class="text-hover-red">Открыть галерею</p>
  </span>
 </a>