CSS Wrapper Won't Align with its Content

Question

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.

Answer 1

I am yet not sure what exactly you are looking but I have tried to make based on what I understood.

With btn-primary class I believe you are using bootstrap.

First, you need to fix your anchor and button markup. Refer to the below snippet that may help you.

Note: If you don't need .row container margin than remove my-2.

.view-products {
    width: 150px;
    height: 208px;
    display: block;
    background-image: url("https://i.imgur.com/PspKZF4.png");
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row my-2">
    <div class="col-12 d-flex justify-content-center">
        <div class="view-products d-flex justify-content-center align-items-center">
            <a href="#" class="text-center">VIEW<br />PRODUCTS</a>
        </div>
    </div>
</div>