html - 我如何使我的响应式表单居中并与其他所有内容均匀对齐？

Question

Link to website

就是这样。在部署我的网站并最终完成它之前，我必须解决的最后一步。但我不知道如何解决这个问题。出于某种原因，联系表格的左侧似乎有空白，并且测量结果已关闭。如果您仔细观察我为测试设置的边框，我希望它与我的内容在中小型设备屏幕上的绿色边框完全对齐并居中。当我在现代浏览器 (firefox) 上一直缩小我的页面时，表单向左移动，看起来右边有一个边距。它现在在现代浏览器和 IE 上看起来是一样的(这很好)。我希望任何修复与这些旧浏览器保持一致。我尝试更改表单的宽度并尝试按照我为社交图标所做的操作并将其放入多个容器中，但这没有用(除非我做错了)。如果有人可以帮我解决这个问题，我将不胜感激。我将在本周末剩下的时间里在线不断地进行更改和持续更新，以便您可以立即看到更改的效果。

问题的视觉表示:

HTML:

<div id="main_section">
                <div id = "center">

                <div id="contact_section">
                    <form method="POST" action="contact.php">
                    <span class="label">Name</span><br/>
                    <input type="text" class="textfield" name="name" size="50" maxlength="50"><br/>
                    <span class="label">Email</span><br/>
                    <input type="text" class="textfield" name="email" size="50" maxlength="50"><br/>
                    <span class="label">Subject</span><br/>
                    <input type="text" class="textfield" name="subject" size="50" maxlength="50"><br/>
                    <span class="label">Message</span><br/>
                    <textarea rows="5" cols="50" name="message" id="textarea" maxlength="500"></textarea><br/>
                    <input type="submit" value="Send" id="submit" name="action"> 
                    </form>
                </div>
                </div>

        </div>

主要 CSS:

#contact_section {
    max-width:100%;
    margin-bottom:40px;
    margin-right: 0px;

    margin-top:20px;
    padding: 20px 6px 20px 6px; /*Make this smaller for 100% responsiveness*/
    border-radius:10px;
    background:#f1f1f1;
    box-shadow:0px 0px 15px #272727; 
    float:right;
    text-align:center;
}

中小屏幕CSS:

#center{
width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width:100%;
border: 1px red solid;
text-align:center;
}

#contact_section {
width:95%;
max-width:100%;
 margin-left: auto;
  margin-right: auto;
  text-align:center;
  border: 1px yellow solid;
}

Answer 1

问题是您的 #contact_section float 在您的主 CSS 上，所以它总是正确对齐。尝试在小屏幕 CSS 的 #details_sections 和 #contact_section 上设置 float:none;

编辑

作为对您对主布局的评论的回应，请尝试以百分比设置您的 div 宽度:

#details_section {
  width: 40%;
  margin-right: 5%;
  float: left;
}

#contact_section {
  width: 55%;
  float: left;
}

#contact_section form{
  padding: 20px 6px 20px 6px;
}

你可能想删除或调整你的输入最大宽度