文本域（Textarea）与签名板移动端错位问题求助

我是HTML/CSS新手，正在为公司开发表单副业项目。我的textarea在多数设备预览和live server中对齐正常，但在三星Galaxy S8、Galaxy Fold、iPhone SE等小屏移动设备中会向右超出容器。我已经尝试调整textarea宽度（设置max-width/min-width、改为auto/relative）、修改margin-right等边距属性，且为所有元素设置了box-sizing:border-box，但问题仍未解决，想知道原因和全设备一致的解决办法。

• 重复全局样式冲突：CSS中重复定义了两次*选择器，第二次的全局样式可能干扰了box-sizing的正常作用。
• .column负边距溢出：.column设置了margin: -1%，这个负边距会让元素超出父容器，小屏设备上该问题被放大，直接导致textarea溢出。
• Grid布局最小宽度限制：.row的grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))设置了300px的最小列宽，当设备宽度小于300px时，grid容器会超出父元素，内部textarea随之溢出。
• textarea样式重复定义：分别为textarea单独写了样式，又在textarea, input选择器里重复定义，优先级冲突导致宽度设置异常。
• 无效CSS属性：textarea的position: flex是不存在的属性值，可能引发渲染异常。

1. 清理重复全局样式 #

删除重复的*选择器，只保留一套全局重置：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

2. 修复.column负边距问题 #

移除负margin，改用合理方式控制间距：

.column {
    /* 移除 margin: -1%; */
    flex: 1;
    padding: 10px;
}

3. 调整Grid布局适配小屏 #

降低grid列的最小宽度，适配小屏设备：

.row {
    margin-top: 1px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px 30px;
}

4. 统一textarea样式 #

合并重复样式，移除无效属性，确保宽度设置一致：

textarea {
    display: block;
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    background-color: transparent; /* 修复#none的错误写法 */
    font-size: 16px;
    resize: none;
    border-radius: 2px;
    border: 2px solid #707070;
    outline: none;
    font-weight: 400;
}

5. 补充小屏媒体查询规则 #

优化小屏设备的容器和按钮布局：

@media screen and (max-width: 500px) {
    .container {
        min-width: 95%;
        margin: 2%;
        padding: 5% 3%;
    }
    .form .column {
        flex-wrap: wrap;
    }
    .submit-button {
        width: 100%;
        margin: 3% 0;
    }
}

6. 修复HTML嵌套表单问题 #

HTML中表单不能嵌套，把内部的<form id="signatureForm">改为<div id="signatureForm">：

<div id="signatureForm">
    <!-- 签名板相关内容 -->
</div>

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