Html 为什么我的字段集容器在mobile view中溢出，但在较大的屏幕上却没有溢出？

我正在使用表单创建一个移动第一响应网站。这是我需要在769px之后创建的理想模型。以下是769px及以下版本所需的模型： 但为什么在769px之前，我的fieldset容器的内容物溢出？是什么导致了这种情况？为了清晰起见，我在某些元素周围加上了红色边框。 请看这里：

以下是我的CSS和HTML代码：

*{
框大小：边框框；
}
身体{
背景：贝壳；
字体系列：“Merriweather”，衬线；
}
.标题内容{
文本对齐：居中；
背景：#29405a；
颜色：白色；
边框：1px实心#29405a；
}
.注册{
文本对齐：居中；
边框底部：2px#29405a虚线；
保证金：0自动；
宽度：90%；
}
.表格{
利润率：10px自动；
宽度：70%；
背景#feffff；
填充：30px；
边界半径：10px；
边框：1px红色实心；
}
.场{
填充：20px；
保证金：0自动；
边框：3倍红色实心；
}
/*输入样式*/
输入[type=“text”]，
输入[type=“email”]，
输入[type=“tel”]，
文本区，
挑选{
背景：#e8eeef；
框阴影：0 1px 0 rgba（0,0,0,0.03）插入；
边界：无；
边界半径：5px；
填充：12px0；
}
按钮[type=“submit”]{
背景#52bab3；
颜色：#FFF；
填充：10px 30px；
边界：无；
边界半径：5px；
光标：指针；
}
.新闻输入{
边缘底部：20px；
}
.新闻输入标签{
左边距：10px；
}
.联系人输入{
保证金：20px自动；
边框：1px红色实心；
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
}
.标签{
边缘底部：10px；
}
.文本区{
显示器：flex；
弯曲方向：立柱；
}
.按钮{
显示器：flex；
弯曲方向：立柱；
}
.额外信息{
文本对齐：居中；
}
@介质（最小宽度：768px）{
.联系人输入{
显示器：flex；
弯曲方向：行；
}
.标签，
.输入{
弹性：1；
}
.输入{
弹性：3；
}
.zip输入，
.zip标签{
弹性：0；
弹性基准：25%；
}
}

登记表
守则检讨
注册我们的时事通讯
在收件箱中获取有关代码正确运行情况的最新消息

联系方式
名称
电子邮件地址
电话号码
街道地址
城市
陈述
阿拉巴马州
阿拉斯加州
亚利桑那州
阿肯色州
加利福尼亚
科罗拉多州
康涅狄格州
特拉华州
哥伦比亚特区
佛罗里达州
佐治亚州
夏威夷
爱达荷州
伊利诺伊州
印第安纳州
爱荷华州
堪萨斯州
肯塔基州
路易斯安那州
缅因州
马里兰
马萨诸塞州
密歇根
明尼苏达州
密西西比
密苏里州
蒙大拿
内布拉斯加州
内华达州
新罕布什尔州
新泽西州
新墨西哥州
纽约
北卡罗来纳州
北达科他州
俄亥俄州
奥克拉荷马
俄勒冈
宾夕法尼亚
罗德岛
南卡罗来纳州
南达科他州
田纳西州
得克萨斯州
犹他州
佛蒙特州
弗吉尼亚州
华盛顿
西弗吉尼亚州
威斯康星州
怀俄明州
邮政编码
新闻稿
选择要接收的报纸：

HTML新闻
CSS新闻
Javascript新闻
通讯格式

HTML
CSS新闻
其他你想听的话题

注册
《守则》检讨版权所有

在小屏幕上，您必须设置

.form {
   width: 100%;
}

否则，较大的组件将溢出太小的

.form

div

*{
框大小：边框框；
}
身体{
背景：贝壳；
字体系列：“Merriweather”，衬线；
}
.标题内容{
文本对齐：居中；
背景：#29405a；
颜色：白色；
边框：1px实心#29405a；
}
.注册{
文本对齐：居中；
边框底部：2px#29405a虚线；
保证金：0自动；
宽度：90%；
}
.表格{
利润率：10px自动；
宽度：100%；/*设置为100%*/
背景#feffff；
填充：30px；
边界半径：10px；
边框：1px红色实心；
}
.场{
填充：20px；
保证金：0自动；
边框：3倍红色实心；
}
/*输入样式*/
输入[type=“text”]，
输入[type=“email”]，
输入[type=“tel”]，
文本区，
挑选{
背景：#e8eeef；
框阴影：0 1px 0 rgba（0,0,0,0.03）插入；
边界：无；
边界半径：5px；
填充：12px0；
}
按钮[type=“submit”]{
背景#52bab3；
颜色：#FFF；
填充：10px 30px；
边界：无；
边界半径：5px；
光标：指针；
}
.新闻输入{
边缘底部：20px；
}
.新闻输入标签{
左边距：10px；
}
.联系人输入{
保证金：20px自动；
边框：1px红色实心；
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
}
.标签{
边缘底部：10px；
}
.文本区{
显示器：flex；
弯曲方向：立柱；
}
.按钮{
显示器：flex；
弯曲方向：立柱；
}
.额外信息{
文本对齐：居中；
}
@介质（最小宽度：768px）{
.表格{
宽度：70%；
}
.联系人输入{
显示器：flex；
弯曲方向：行；
}
.标签，
.输入{
弹性：1；
}
.输入{
弹性：3；
}
.zip输入，
.zip标签{
弹性：0；
弹性基准：25%；
}
}

登记表
守则检讨
注册我们的时事通讯
在收件箱中获取有关代码正确运行情况的最新消息

联系方式
名称
.form {
   width: 100%;
   display: block;
   margin-left: auto;
   margin-right: auto;
   max-width: 1024px; //insert your prefer value here;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  background: #e8eeef;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  border: none;
  border-radius: 5px;
  padding: 12px 0;
}