CSS Wrapper Won't Align with its Content

I was trying to center my button with margin 0 auto; but it appears to move more towards the right Reference Image 1 along with my jumbotron line and as I inspect i saw that my button wrapper was not inline with my button Reference Image 2

But as I ran my code here it seems to work fine:

.view-products {
  font-family: Bebas Neue;
  font-size: 20px;
  color: #fff;
  padding: 5px 15px;
  height: 160px;
  width: 115px;
  border-radius: 60% 60% 60% 60% / 75% 75% 45% 45%;
  background-color: Transparent;
  background-repeat: no-repeat;
  border: 5px solid #fff;
  transition: 0.8s;
}

.view-products a {
  text-decoration: none;
  color: #fff;
}

.view-products:hover {
  background-color: #eb974e;
  color: #ffcb05;
}

.view-products a {
  color: #eb974e;
}

.button-wrapper {
  margin: 0 auto;
  padding: 0;
  width: 115px;
}

<div class="row button-wrapper">
  <div class="col-12">
    <a href="products.html">
      <button type="button" class="view-products btn btn-primary">VIEW<br>PRODUCTS</button>
    </a>
  </div>
</div>

What should I do to my button so that it would align to its wrapper?

I've already tried removing other objects and had same results, something must've been pushing my button as it is centered when i scroll Reference Image 3 and it's not the logo or navbar

I'm new to web dev and this is my first portfolio project I would really appreciate anyone that could help me solve this as I've already tried a lot of methods only to see no difference.