html – KEY PROBLEM ON STYLE.CSS

I have a problem that I even solved .. but I would like to see the opinion of some professionals or even a better solution.

CODE:
This is the button in my HTML

.btn-principal {
  border-style: none;
  margin-left: 40px;
  cursor: pointer;
  padding: 11px 26px;
  border-radius: 23px;
  background: linear-gradient(0.34turn, #6859EA, #6ACBE0);
  color: #fff;
  transition: .2s ease-in-out;
}

.btn-principal:hover {
  box-shadow: 5px 5px 11px rgba(0, 0, 0, .2);
  transition: .2s ease-in-out;
}

it will look like this:

Enter image description here

Mouse over looks like this:

Enter image description here

Now comes the problem, when I update the page of my button, it starts at a point and becomes more normal. Like you loaded her like this:

1

Enter image description here

2

Enter image description here

3

Enter image description here

I have noticed that this problem occurs because I have my CSS in a different folder. If I put it right in my head, the problem does not arise.

Does anyone have any tips?

because I think that would not be a good exercise, but it was the only way I found it.

thank you in advance