How to stop button from moving when screen size of device changes?

Question

HTML:
<div class="button">
<a href="#l">
<button class="btn">ORDER</button>
</a>
</div>
CSS:
.btn {
box-sizing: border-box;
position: fixed;
width: 158px;
height: 40px;
left: 664px;
top: 445px;
background: #fef9d3;
box-shadow: inset 3px 2px 4px
rgba(0, 0, 0, 0.25);
border-radius: 6px;
font-family: 'Coiny';
font-style: normal;
font-weight: thin;
font-size: 20px;
line-height: 13px;
color: black;
text-align: center;
background-attachment: fixed;
}

Answer 1

Also it is not good practice to nest button inside a tag, you can nest div for example and make it look like button, or just make a tag look like button
https://www.w3docs.com/snippets/css/is-it-possible-to-nest-an-html-button-element-inside-an-a-element-in-html5.html

Answer 2

You here used left: 664px and top: 445px, this wont look same on every device because of screen size.
Avoid using pixels(fixed units) and use percent or viewport units(this will change automatically depending of screen size)
https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

Sometimes we also need to change look on mobile phones or tablets, so you may need to use @media to make responsive look.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 3

Thank you so much @PanicS, I used percent instead of pix and it worked!