CSS - Media Query not functioning correctly - html

Question

In my project, I have a div which I want to move the position of when the screen reaches a certain size. I attempt to make a media query to perform this, however the form still stays in one position no matter what screen size.
Here is my code:
.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;
}
}
UPDATED:
#media screen and (max-width: 1200px) {
.formContainer {
left: -10000px;
}
}
UPDATE 2:
#media screen and (max-width: 1200px) {
.formContainer {
background-color: red;
}
}
THE CODE:
<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;"> 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 %}
Does anybody know the issue? Thank you.

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

Add
<meta name="viewport" content="width=device-width, initial-scale=1">
in your header