Html CSS-媒体查询无法正常运行

在我的项目中，我有一个div，我想在屏幕达到一定大小时移动它的位置。我尝试进行媒体查询来执行此操作，但是无论屏幕大小如何，表单仍保持在一个位置

这是我的代码：

.formContainer{
位置：相对位置；
边框：1px实心#e0；
宽度：400px；
高度：550px；
左边距：768px；
边缘顶部：140px；
}
@媒体屏幕和屏幕（最大宽度：1200px）{
.formContainer{
背景色：红色；
}
}

....

添加

---

在标题中，媒体查询正在运行。应用

左：10px

。在codepen上测试代码。你期望发生什么？@epanalepsis-Hi！我希望表单移动10px到right@epanalepsis检查我的更新代码。我在您的问题中添加了一个堆栈代码段，如果单击“运行代码段”，您可以看到它正在工作。。。背景是红色的。@epanalepsis只是提到一下，在这个DIV中有嵌套的元素，比如images等，它们的位置都设置为relative。这有区别吗？在css之前还是之后？在css之前我添加它。尝试使用一些其他属性，只是为了测试它，还尝试添加！就在“；”之前很重要我已经添加了重要的行和一些附加属性，但是仍然没有更改occurs@eweee只需在页边空白处和页边空白处添加注释，以便媒体查询正常工作。您好，此解决方案（注释页边空白处）也不起作用。@AnshulChaurasia请给出您的答案，并在答案中添加解释。还请解释更改页边距会影响定位的适用性的原因。@eweee make left:100px查看效果，而两个页边距都应该注释。@AnshulChaurasia是的，我有。检查我的更新代码，查看问题是否可能是我的Div中的其他问题？非常感谢。

.formContainer {
  position: relative;
  border: 1px solid #e0e0e0;
  width: 400px;
  height: 550px;
  margin-left: 768px;
  margin-top: 140px;
}

@media screen and (max-width: 1200px) {
    .formContainer {
      left: -200px;
    }
  }

.formContainer {
  position: relative;
  border: 1px solid #e0e0e0;
  width: 400px;
  height: 550px;
  margin-left: 768px;
  margin-top: 140px;
}

@media screen and (max-width: 1200px) {
    .formContainer {
      left: -200px;
    }
  }