Javascript 无法理解如何使用CSS格式化HTML页面

所以我需要让我的页面看起来如下减去顶部的日期和标志，但我不知道如何使框不堆叠成那样，以及如何使下拉列表彼此相邻。我正在学习任何帮助

它应该是什么样子的：

我的是什么样子的：

字段集{
宽度：200px；
框大小：边框框；
保证金：自动；
}
挑选{
宽度：200px；
框大小：边框框；
保证金：自动；
}

美国/欧盟日期和时间选择器
格式
美国

欧洲的
字号
中等

大的

大型
旗帜
显示



文本颜色

红色
粉红色
紫色
橙色
背景色
红色
黄色的
紫色
橙色


提交

我建议看看Flex和Grid。它们非常强大，肯定会帮助您使事物完美地对齐

同时，您的帖子位于错误的部分，应使用HTML或CSS格式。

正文{
填充：8px；
保证金：自动；
}
#主要{
宽度：100%；
}
.入境货柜{
边距：自动；对齐项目：居中；
显示：块；
宽度：100%；
文本对齐：居中；
}
#格式，#字体大小，#标志{
显示：内联！重要；
左侧填充：22px；
右边填充：22px；
文本对齐：左！重要；
最小宽度：100px；
}
#文本颜色{
显示器：flex；
边缘顶部：30px；
}
#文本颜色。输入组{
宽度：30%；
显示：网格；
左侧填充：12px；
右侧填充：12px；
}
#文本颜色。输入组选择{
宽度：100%
}

美国/欧盟日期和时间选择器
格式
美国

欧洲的
字号
中等

大的

大型
旗帜
显示
文本颜色

红色
粉红色
紫色
橙色
背景色
红色
黄色的
紫色
橙色
提交

欢迎使用堆栈溢出！这是一个评论，而不是一个答案。如果希望将其视为答案，请提供工作代码。是的，我知道你没有足够的代表发表评论，这就是为什么你需要创建一个可验证的答案。谢谢你的反馈。非常感谢！不客气。