整个页面在移动设备中混乱

Question

当我使用移动设备打开网站时，图像会重复出现，并且按钮对齐不正确。我希望按钮位于笔记本电脑垫的中央，并且在背景图像中不再重复。与在桌面上显示的方式相同。 css ：

body{
    display: flex;
    flex-wrap: wrap;
    background: url("header.jpg");
    background-repeat: no-repeat; 
    background-size: cover;
    display: block;
    margin: auto;
    text-align: center;
}
h1{

    font-family: "Colus";
    font-size: 35px;
    color: #F7008C;
    margin-top: 470px;
}

h1:hover{
    transform: scale(1.1);
}

.mybtn{
    border-radius: 50%;
    position: fixed;
    bottom: 100px;
    left: 0;
    margin-left: 850px;
}
.mybtn:hover{

    border-color: #ee4b08;
    border-width: 5px;
    cursor: pointer;
}

这里是网站，因此您可以看到我的问题：art1373.github.io