Html 使用Flexbox构建快速响应的新闻稿注册表单

我在一个旧网站上看到了这个表单，并尝试使用flexbox复制它

我注意到，在桌面屏幕上，输入字段的宽度更长，而在移动设备上，输入字段的宽度更小，这是因为添加了一些左右填充。那很好，正是我想要的

这是我的尝试：

：根目录{
框大小：边框框；
}
*,
*：：之前，
*：：之后{
框大小：继承；
}
身体{
保证金：0；
填充：0；
}
氢{
保证金：0；
填充：0；
颜色：#fff；
/*文本对齐：居中*/
}
.科{
背景：#0e9daf；
}
.分段集装箱{
背景：#0D8C5D；
最大宽度：900px；
保证金：0自动；
填充：20px 60px；
文本对齐：居中；
}
.货柜组{
颜色：#fff；
}
形式{
显示器：flex；
柔性流：行换行；
证明内容：中心；
利润率：-8px；
}
表格>*{
利润率：8px 3px；
}
.col-1{
弹性：0 1 25em；
}
.表格电邮{
填充：8px 8px；
边框：1px实心透明；
边界半径：0.1875em；
背景：#fff；
字号：1.1rem；
宽度：100%；
}
.表格提交{
边框：1px实心透明；
边界半径：0.1875em；
填充：8px 3em；
颜色：#fff；
字号：1.1rem；
字体大小：粗体；
光标：指针；
背景：#007c89；
}
.表格容器{
利润率：25px 0 10px；
}

灵活学习
注册我们的时事通讯
我们尊重您的隐私，从不泄露您的电子邮件地址