CSS-调整窗口大小时按钮消失

在我的项目中，我有一个按钮。当我调整浏览器窗口的大小时，当屏幕达到1042px的宽度时，该按钮会神奇消失。当它在屏幕上消失时，我在浏览器中检查了检查工具，该元素仍位于网页中的某个位置，但是在屏幕上不可见。

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;
}

有人知道如何解决此问题吗？谢谢。