无法让输入字段留在联系表单的 div 中

Question

我真的被一些应该很简单的事情困住了。我在 Google 上搜索了修复程序，但找不到任何修复程序。大多数人都说要添加{box-sizing: border-box;}，但我已经有了。

HTML 代码：

<div class="row">
  <form  method="post" action="#" class="contact-form clearfix">
    <div class="row">
     <div class="col span-1-of-2">                     
      <input type="text" name="name" id="name" placeholder="Name" required>
     </div>
     <div class="col span-1-of-2">
      <input type="email" name="email" id="email" placeholder="Email" required>
     </div>
    </div>
                          
    <div class="row">
      <textarea name="message" id="message" rows="4" placeholder="Message"></textarea>
    </div>
                          
    <div class="row">
       <input type="submit" name="submit" id="submit" value="SEND MESSAGE">
    </div>                  
  </form>
</div>

CSS 代码：

/* THE STANDARD STUFF */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body{
    background-color: #fff;
    color: #777;
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.clearfix{zoom:1;}
.clearfix:after{
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.row{
    width: 1170px;
    margin: 0 auto;
}


/* FROM GRID.CSS */

.row:before,
.row:after {
    content:"";
    display:table;
}
.row:after {
    clear:both;
}

.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; }

.span-1-of-2 {
    width: 49.2%;
}

/* THE CONTACT STYLE */

.contact-form{
    width: 80%;
    margin: 0 auto;
}

input[type=text], input[type=email], textarea{
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

textarea{    
    height: 100px;
}

.contact-form #submit{
    border: 0;
    margin-top: 20px;
}

*:focus{
    outline: none;
}

表单如下所示：http://codepen.io/anon/pen/apVzyg

如您所见，字段被推到右侧，而不是停留在行和联系表单的容器中，该容器设置为 80%。对于我的一生，我无法弄清楚为什么会发生这种情况。也许错误就在我面前，但我现在已经有了狭隘的视野。

我是根据讲师的风格和示例制作的，您可以在这里查看：http://codepen.io/anon/pen/VPrYqm

这和我的有点相似，只是我不使用标签，而是使用 col 1-of-2。

grid.css 文件是从 responsivegridsystem(dot)com 下载的。

Answer 1

contact-form 父容器属于 .row 类，将获得 1170px 的固定宽度。然后contact-form被定义为该尺寸和margin auto的80%。所以边距将是 1170px 的 20%，每边 10%。您可以通过删除 1170px 限制来修复它。您可以查看 min-width 和 max-width 属性以实现更具适应性的布局。

Answer 2

出现问题是因为您明确设置了行宽。

width: 1170px;

删除此行，您将获得所需的 HTML 呈现。

看到这支笔：http://codepen.io/vici0us/pen/mRqJXK?editors=1100