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

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 在你的主 CSS 上浮动，所以它总是正确对齐。尝试在小屏幕 CSS 中的 div #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;
}

您可能希望删除或调整输入的最大宽度

Answer 2

请注意，您的绿色框和联系表格都不是真正居中的。当您使用float:right 时，您有margin-right:auto; 和margin-left:auto 并不重要，因为浮动仍然向右推。 . 我的建议是将两个容器的宽度设置为 94% 而不是 95% 并添加 margin-right:3% 和 margin-left:3%..

更具体地说，这样做：

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

float:none 正如 koala_dev 推荐的那样，可能会破坏你的整个页面，因为到目前为止你一直在使用浮动元素（你的容器也是浮动的等等）..