CSS - Button disappears when resizing window

In my project, I have a button. When I resize my browser window, the button magically dissapears, when the screen reaches a width of 1042px. When It disappears on the screen, I check the inspect tools in my browser and the element is still in the webpage somewhere, however not visible on the screen.

HTML:

<div class ="section-1">
<button class="signupBodyBtn">Sign up free, today</button> 
</div>

CSS:

.section-1 {
    width: 100%;
    position: relative;
    height: 100vh;
    background: url("https://images.paras.com/testimg/10100") no-repeat center center/cover;
}


.signupBodyBtn {
    position: relative;
    z-index: 2;
    top: 263px;
    right: 683px;
    background-color: transparent;
    color: white;
    border-radius: 5px;
    height: 60px;
    width: 220px;
    font-weight: bolder;
    font-size: 18px;
    border: 1px solid white;
}

Does anybody know how to fix the issue? Thank you.