CSS网格布局中的HTML表单

我正在尝试为一个网站制作一个表单，我使用CSS网格布局作为这个表单，因为它是一种大型的调查表单，使用网格布局是有意义的。 然而，我遇到了一个问题，我需要一些帮助。 我附上它在Mozilla Firefox上的外观。既然基本信息和住宿都在同一个网格系统上，而且内容设置在中心，为什么它们不一致

下面是我的CSS和HTML代码

正文{
保证金：0；
;
}
.集装箱{
显示：网格；
宽度：100%；
高度：100vh；
网格模板柱：1fr 1fr 1fr；
网格模板行：1fr 1.5fr 1fr；
网格模板区域：“进度”“基本信息”“基本信息”“第2页第2页第2页”；
}
.container.progressbar{
显示：网格；
网格模板列：5rem 5rem 5rem；
保证金：5px；
填充物：5px；
;
网格区域：进展；
证明内容：中心；
对齐内容：居中对齐；
}
.容器.第1页{
显示：网格；
网格区域：basicinfo；
证明内容：中心；
}
.容器.第2页{
填充顶部：10px；
显示：网格；
网格区域：第2页；
证明内容：中心；
}
.容器.字段{
垫面：1毫米；
}
.container.page2.page2下拉列表{
显示器：flex；
宽度：60%；
}
.容器.页面.设施{
显示器：flex；
}
.container.page2.page2下拉菜单#hotelpeople{
边缘顶部：10px；
;
}
.container.page1输入{
边界：无；
边框底部：3倍纯青色；
边缘顶部：5px；
底部：-5px；
大纲：无；
位置：相对位置；
边界间距：5px；
字体系列：无衬线；
字号：1rem；
线高：2米；
}
.容器.标题范围{
文字装饰：无；
文本转换：大写；
显示：块；
位置：相对位置；
}
.container.title span:：after{
内容：''；
位置：绝对位置；
宽度：7em；
背景：#2699FB；
高度：.6em；
底部：-3px；
顶部：17px；
左：-2px；
}

名字

1.
名字

1.
名字

1.
名字

1.
基本信息：
日期

下一个
我不想要吃喝
有多少人：
1.
2.
3.
奥迪
有多少人：
1.
2.
3.
奥迪
您希望包括在住宿地点的设施

一个
两个
三
四
一个
两个
三
四
下一个

您也可以发送HTML吗？谢谢！我已经编辑，我也有我的html，即使它有点长！运气好吗？！但我仍在试图弄清楚为什么会发生这种情况，却找不到合乎逻辑的解释。我甚至考虑把整个调查表变成一个更传统的内嵌块和块显示，但是我认为CSS网格布局更符合逻辑。