Javascript 提交按钮未显示在不同屏幕的同一区域中

当我在不同的屏幕上查看时，我的提交按钮显示在非常不同的位置。我知道使用媒体查询有助于实现这一点，但我只希望这些项目显示在大致相同的区域中

我已经尝试使用百分比作为维度，但问题仍然存在。有什么建议吗？我过去在百分比方面很幸运，我不知道为什么他们在这个具体问题上对我不起作用。还有什么不对劲吗

这是我的代码（提交按钮的样式在样式表的底部）：

html{
字体系列：“PT Sans”、Helvetica、Arial、Sans serif；
背景#f1f2f6；
}
身体{
背景#f1f2f6；
保证金：0；
填充：0；
}
.类名栏{
位置：相对位置；
高度：270px；
宽度：75%；
背景色：#ffffff；
保证金：自动；
利润上限：35px；
边界半径：5px；
}
.类名{
位置：绝对位置；
高度：220px；
背景图像：线性渐变（到底部，rgba（10,10,25,85），rgba（0,0,0,0.85）），url(https://miro.medium.com/max/2656/1*d0Qd8OUx_TUxG7N6H991ew.jpeg）；
宽度：100%；
边界半径：5px5px0；
}
.类名h1{
文本对齐：居中；
字体大小：60px；
边缘顶部：50px；
字号：200；
颜色：#ffffff；
}
.类名p{
文本对齐：居中；
字体大小：20px；
颜色：#f1f2f6；
利润率：-20px；
}
#航行{
位置：绝对位置；
}
李处长{
显示：内联块；
利润率最高：86%；
左边距：25px；
颜色：#333333；
字体大小：20px；
列表样式：无；
}
导航ul li a分部{
文字装饰：无；
颜色：#000000；
}
导航ul li a：悬停{
文字装饰：无；
颜色：#ff4757；
}
.邮政区包装{
位置：相对位置；
高度：120px；
背景色：#ffffff；
利润率：20px；
宽度：35%；
左缘：52.5%；
边界半径：5px；
}
.邮政区{
位置：相对位置；
宽度：95%；
利润率：2%；
}
输入[类型=职位]{
填充：3%；
宽度：95%；
边界：无；
字号：18px；
背景色：#f1f2f6；
利润率最高：3%；
}
.提交{
位置：绝对位置；
边界：无；
左缘：83%；
填充：5px16px；
边界半径：25px；
背景色：#D3；
}

微积分
MA2500






提交

为了使“提交”按钮始终位于同一位置，您必须使用“左上右下”定义其确切位置，或者使用下面的代码而不定义绝对位置，您可以简单地将其定义为一个块，然后给它留有左边距：auto，它将其定位在div的右侧，并从右边给它留一点空白

.submit {
    display:block;
    border: none;
    margin-right:10px;
    margin-left:auto;
    padding: 5px 16px;
    border-radius: 25px;
    background-color: #D3D3D3;
}

---

你想把它放在哪里？在“复习本课程…”框中？如果是的话，你想把它放在盒子里的什么地方？左边、右边、中间？很高兴它帮助了你：）