Desktop and mobile display different for DIVS - html

Question

I've got a very simple table that I have managed to get looking how I want it in desktop versions of chrome and firefox:
Browser output:
However when I view it on a mobile device it loks like this:
Mobile output:
(I put borders round the two elements to so I could see where the div went to etc.
This is my relevant HTML:
<div id="title">My Secret Diary.</div>
<div id="container">
<?php if ($errorMsg){echo "<div id='errorMsg'>".($errorMsg)."</div>";} ?>
<form id="newUserForm" method="POST">
<input type="text" name="email" placeholder="Enter email."><br>
<input type="text" name="password" placeholder="Enter password."><br>
<div class="formDiv">
<input type='hidden' name='signUp' value=1>
<button type="submit" value="submit">Sign Up!</button>
<input type="checkbox" name="rememberUser" value =1>Remember me.<br>
<div id="newToggle">(Already registered? Click here)</div>
</div>
</form>
<form id="logUserForm" method="POST">
<input type="text" name="email" placeholder="Enter email."><br>
<input type="text" name="password" placeholder="Enter password."><br>
<div class="formDiv">
<input type='hidden' name='signUp' value=0>
<button type="submit" value="submit">Log in!</button>
<input type="checkbox" name="rememberUser" value=1>Remember me.<br>
<div id="logToggle">(New user? Click here)</div>
</div>
</form>
</div>
This is my relevant CSS:
#title{
font-family: 'Gaegu', cursive;
font-size: 500%;
width: 1000px;
height: 200px;
color:mediumpurple;
margin:auto;
text-align: center;
padding-top: 50px;
border: black solid 1px;
}
#container{
margin:auto;
width:500px;
padding-top: 50px;
border: solid 1px blue;
}
.formDiv{
text-align: center;
}
Any help muchly appreciated!

Answer 1

basically you want to make your div responsive (to center it in the mobile device), try to use #media rule
The #media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
1- width and height of the viewport
2- width and height of the device
3-orientation (is the tablet/phone in landscape or portrait mode?) resolution
try to change the size of your text and your videos with the media queries technique, do some research about the media rule css to make your layout responsive.

Answer 2

for me i usually use to solve this kind of problems by wrapping the division which is not centered in mobile but is centered on laptop inside center tags
like this:
<div id="title">
My Secret Diary.
</div>
<center>
<div id="container">
<?php if ($errorMsg){echo "<div id='errorMsg'>".($errorMsg)."</div>";} ?>
<form id="newUserForm" method="POST">
<input type="text" name="email" placeholder="Enter email."><br>
<input type="text" name="password" placeholder="Enter password."><br>
<div class="formDiv">
<input type='hidden' name='signUp' value=1>
<button type="submit" value="submit">Sign Up!</button>
<input type="checkbox" name="rememberUser" value =1>Remember me.<br>
<div id="newToggle">(Already registered? Click here)</div>
</div>
</form>
<form id="logUserForm" method="POST">
<input type="text" name="email" placeholder="Enter email."><br>
<input type="text" name="password" placeholder="Enter password."><br>
<div class="formDiv">
<input type='hidden' name='signUp' value=0>
<button type="submit" value="submit">Log in!</button>
<input type="checkbox" name="rememberUser" value=1>Remember me.<br>
<div id="logToggle">(New user? Click here)</div>
</div>
</form>
</div>
</center>
hope so it may solve your problem