Html 居中a"；“接触盒”&；使其具有响应性

我正在尝试在我的网站上创建一个联系人页面。我希望联系人表单（又名“姓名、电子邮件、消息”框）居中，即使调整了窗口大小，也要保持页面居中。然而，我遇到了一些问题

我让接触盒居中，但当我实现导航栏的代码（我在所有其他页面上都有）时，它完全改变了接触盒的位置，而是将其一直拉到最左边，导航栏就在那里

我假设在我的导航条形码的某个地方，它会调整其他所有内容的位置，但是由于我对基本的HTML、CSS和Javascript比较陌生，所以我很难找出这背后的原因

如果有人能提供任何关于导致此问题的原因/如何解决此问题的见解，我们将不胜感激！谢谢

下面是我的CSS和HTML：

body{
字体系列：“Raleway”，无衬线；
背景：url（“../images/example.jpg”）；
背景重复：无重复；
背景位置：中心；
背景附件：固定；
背景尺寸：封面；
}
/*接触盒*/
表格{
最大宽度：420px；
利润率：200px自动；
}
.反馈输入{
颜色：白色；
字体系列：“Avenir”，Arial，无衬线；
/*字号：500*/
字号：18px；
边界半径：5px；
线高：22px；
背景色：透明；
边框：2个实心#CC6666；
过渡：均为0.3秒；
填充：13px；
边缘底部：15px；
宽度：100%；
框大小：边框框；
大纲：0；
}
.反馈输入：焦点{边框：2px实心#CC4949；}
文本区{
高度：150像素；
线高：150%；
调整大小：垂直；
}
[type=“submit”]{
字体系列：Arial、Helvetica、无衬线字体；
宽度：100%；
背景：#CC6666；
边界半径：5px；
边界：0；
光标：指针；
颜色：白色；
字体大小：24px；
填充顶部：10px；
垫底：10px；
过渡：均为0.3秒；
利润上限：-4px；
字号：700；
}
[type=“submit”]：悬停{背景：#CC4949；}
/*导航条*/
/*按钮的样式*/
.dropbtn{
背景色：rgba（255255,0）；
颜色：白色；
/*保证金：0自动*/
字体大小：16px；
边界：无；
光标：指针；
}
/*控制菜单内容位置的div*/
.下拉列表{
位置：固定；
左：0；
排名：0；
显示：内联块；
}
/*下拉内容*/
.下拉内容{
/*字体系列：*/
显示：无；
/*右：0*/
背景色：#f9f9f9；
最大宽度：150px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时链接的颜色*/
.下拉内容a:悬停{背景色：#ffe6f0}
/*悬停时显示菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
.下拉列表：活动。下拉列表内容{
背景色：红色；
}
/*显示内容时更改下拉按钮的背景色*/
.dropdown:悬停.dropbtn{
背景色：#ff3385；
}

Em | |触点
☰

您忘记为

关闭

。下面是一个固定的html：

仅供参考：您可以随时在线验证生成的html：以检查代码是否正确

body{
字体系列：“Raleway”，无衬线；
背景：url（“../images/example.jpg”）；
背景重复：无重复；
背景位置：中心；
背景附件：固定；
背景尺寸：封面；
}
/*接触盒*/
表格{
最大宽度：420px；
利润率：200px自动；
边框：1px纯红；
}
.反馈输入{
颜色：白色；
字体系列：“Avenir”，Arial，无衬线；
/*字号：500*/
字号：18px；
边界半径：5px；
线高：22px；
背景色：透明；
边框：2个实心#CC6666；
过渡：均为0.3秒；
填充：13px；
边缘底部：15px；
宽度：100%；
框大小：边框框；
大纲：0；
}
.反馈输入：焦点{边框：2px实心#CC4949；}
文本区{
高度：150像素；
线高：150%；
调整大小：垂直；
}
[type=“submit”]{
字体系列：Arial、Helvetica、无衬线字体；
宽度：100%；
背景：#CC6666；
边界半径：5px；
边界：0；
光标：指针；
颜色：白色；
字体大小：24px；
填充顶部：10px；
垫底：10px；
过渡：均为0.3秒；
利润上限：-4px；
字号：700；
}
[type=“submit”]：悬停{背景：#CC4949；}
/*导航条*/
/*按钮的样式*/
.dropbtn{
背景色：rgba（255255,0）；
颜色：白色；
/*保证金：0自动*/
字体大小：16px；
边界：无；
光标：指针；
}
/*控制菜单内容位置的div*/
.下拉列表{
位置：固定；
左：0；
排名：0；
显示：内联块；
z指数：100；
}
/*下拉内容*/
.下拉内容{
/*字体系列：*/
显示：无；
/*右：0*/
背景色：#f9f9f9；
最大宽度：150px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时链接的颜色*/
.下拉内容a:悬停{背景色：#ffe6f0}
/*悬停时显示菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
.下拉列表：活动。下拉列表内容{
背景色：红色；
}
/*显示内容时更改下拉按钮的背景色*/
.dropdown:悬停.dropbtn{
背景色：#ff3385；
}

Em | |触点
☰