Currently, I am in the process of creating a responsive form for my webpage. However, I have encountered an issue with styling where the div containing the form content is not properly aligned within the main div as confirmed by adding borders to it. Despite knowing that there must be a simple solution, I am unable to find it.
When viewed on a mobile device, the div appears off-centered on the page. Here's what it looks like:
https://i.sstatic.net/LbvPQ.png
Here is how the content div actually appears:
https://i.sstatic.net/F9hQQ.png
Below is the CSS code for the 'new_user' class (the inner div):
.form.new_user {
display: inline-block;
width: 100%;
min-width: 230pt;
max-width: 270pt;
border-color: #3e3e3e;
border-width: 1px;
border-style: solid;
padding: 5pt;
}
@media screen and (max-width: 600pt){
.form.new_user {
min-width: 100px;
max-width: inherit;
}
}
And here is the CSS for the content div:
.content {
padding: 7pt;
margin: 7pt;
}
Thank you for any help in advance!
EDIT:
Below is the HTML code:
<body>
<div class="content">
<div class="form new_user>
</div>
</div>
</body>
Additionally, this is the CSS for the body:
body {
margin: 0;
font-family: Helvetica, sans-serif;
}