CSS-媒体查询功能不正常

Question

在我的项目中，我有一个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 {
background-color: red;
}
}

<div class="formContainer">
....
</div>

HTML:

<div class="formContainer">
....
</div>

CSS：

.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: 10px;
}
}

更新：

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

更新2:

@media screen and (max-width: 1200px) {
.formContainer {
background-color: red;
}
}

代码：

<div class="formContainer">
<div class="innerContainer">
</div>
<img class="test233" src="{% static 'mosque.png' %}" width="70px" style="position: relative; top: -75px; left: 60px;">
<span style="position: relative; top: -60px; left: 60px; font-size: 32px; font-family: serif;" class="innerText"> Islamagram </span>
<h2 style="position: relative; font-size: 21px;left:62px; font-family: sans-serif; color: #999999; top: -46px;">&nbsp;Sign up to view and share<br>life-changing islamic content.</h2>
<form class="form" method="post" autocomplete="off">
{% csrf_token %}
{% for field in form %}
{{ field  }}
<br>
{% endfor %}
<button type="submit"class="btn btn-primary subButton"><span class="signupText">Sign Up</span></button>
</form>
{% if error1 %}
<span style="position: relative; color: red; font-size: 18px; left: 69px; top: 10px;">{{  error1 }}<span>
{% endif %}
{% if error2 %}
<span style="position: relative; color: red; font-size: 18px; left: 68px; top: 10px;">{{  error2 }}</span>
{% endif %}
{% if error3 %}
<span style="position: relative; color: red; font-size: 18px; left: 118px; top: 10px;">{{  error3 }}</span>
{% endif %}
{% if error4 %}
<span  style="position: relative; color: red; font-size: 18px; left: 84px; top: 10px;">{{  error4 }}</span>
{% endif %}

有人知道这个问题吗？非常感谢。

Answer 1

.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;
}
}

Answer 2

添加

<meta name="viewport" content="width=device-width, initial-scale=1">

在你的头