Html 使两个元素适应智能手机屏幕

我有一些html和css，如下所示。我想把它用于移动屏幕。 并添加到谷歌的网站块

当我为

container

和

form\u字段添加
width:100%
时，我给出了：

谷歌网站


仅代码，不含谷歌网站


如果删除
宽度：100%
如下所示。没错


如果在谷歌网站上插入一些已经适合移动设备的内容，则会正确显示。适当缩放


：根目录{
背景：#f5f6fa；
颜色：#9c9c9c；
字体：1rem“PT Sans”，无衬线；
}
.集装箱{
宽度：100%；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
}
a{
颜色：继承；
}
a:悬停{
颜色：#7f8ff4；
}
.大写字母{
文本转换：大写；
}
.p{
左侧填充：18px
}
.btn{
显示：内联块；
背景：透明；
颜色：继承；
字体：继承；
边界：0；
大纲：0；
填充：0；
-webkit过渡：所有200毫秒的易用性；
过渡：所有200毫秒的速度都很慢；
光标：指针；
利润率：9px
}
.btn—主要{
背景：#7f8ff4；
颜色：#fff；
盒影：0 0 10px 2px rgba（0,0,0,0.1）；
边界半径：2px；
填充：12px 36px；
}
.btn--主：悬停{
背景#6c7ff2；
}
.btn--返回--主：悬停{
背景：#9c9c9c2d；
}
.btn--主：活动{
背景：#7f8ff4；
盒影：嵌入0 10px 2px rgba（0,0,0,0.2）；
}
.btn--内部{
左边距：-96px；
}
.form__字段{
宽度：100%；
背景：#fff；
颜色：#A3A3；
字体：继承；
盒影：0 6px 10px 0 rgba（0,0,0,0.1）；
边界：0；
大纲：0；
填充：22px 114px 22px 18px；
}
.表格\文本区{
宽度：440px；
高度：300px；
背景：#fff；
颜色：#A3A3；
字体：继承；
盒影：0 6px 10px 0 rgba（0,0,0,0.1）；
边界：0；
大纲：0；
填充：18px 18px；
利润率：18px；
调整大小：无；
}
.box div{
对齐内容：居中对齐；
显示：内联块；
}
@介质（最大宽度：400）{
.集装箱{
宽度：100%
}
.form__字段{
宽度：100%
}
.btn{
宽度：100%
}
}

Загрузить
尝试添加第一个或第二个代码段

/************* short way **************/
form {
  white-space: nowrap;
}
.form__field {
  box-sizing: border-box;
}
/************* better way **************/
.btn--inside {
  position: absolute;
  top: 0;
  right: 0;
  margin-left: 0;
}
.form__field {
  box-sizing: border-box;
  width: 90%;
}
form {
  position: relative;
  width: 100%;
}

这里与谷歌的连接是什么？“并添加到谷歌网站块”，“只有代码，没有网站谷歌”-不知道你在这里说什么。@我是说misorude和
嵌入代码
（块）我在答案中做了编辑。（第二个代码段）