如何防止按钮突破容器内边距导致溢出？

问题核心：绝对定位元素的宽度计算基准是父容器的内容区域（不含padding），你给按钮设置width:100%会让它铺满父容器的content宽度，再加上容器的padding，自然会超出容器可视范围。

给你两种简单实用的解决方法：

方法1：通过左右定位替代width:100% #

去掉按钮的width:100%，改用left和right属性对齐容器的padding内侧，按钮会自动填充这个区间的宽度：

#submit{
    /* 移除width:100% */
    height: 60px;
    border-radius: 8% / 50%;
    background-color: #fc7613;
    font-family: 'Varela Round';
    font-size: large;
    font-weight: 700;
    color: white;
    letter-spacing: 2px;
    position: absolute;
    bottom: 50px;
    left: 50px; /* 与容器padding值一致 */
    right: 50px; /* 与容器padding值一致 */
    box-sizing: border-box;
}

方法2：使用inset-inline简化定位（现代浏览器支持） #

如果你的项目不需要兼容老旧浏览器，可以用inset-inline属性一次性设置左右位置，代码更简洁：

#submit{
    /* 移除width:100% */
    height: 60px;
    border-radius: 8% / 50%;
    background-color: #fc7613;
    font-family: 'Varela Round';
    font-size: large;
    font-weight: 700;
    color: white;
    letter-spacing: 2px;
    position: absolute;
    bottom: 50px;
    inset-inline: 50px; /* 等效于left:50px + right:50px */
    box-sizing: border-box;
}

注意：后续如果修改容器的padding值，记得同步调整按钮的左右定位数值，保证对齐一致。

内容的提问来源于stack exchange，提问作者African3ezwa