无法让输入字段保留在联系人表单的 div 内

Question

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

网页代码：

<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。

网格.css文件从响应式网格系统（dot）com下载。

Answer 1

联系表单父容器属于 .row 类，固定宽度为 1170px。然后联系表单被定义为该大小的 80% 和边距自动。 因此边距将是 1170px 的 20%，每边 10%。您可以通过删除 1170px 限制来修复它。您可以查看最小宽度和最大宽度属性，以实现更具适应性的布局。

Answer 2

出现此问题是因为您显式设置了行宽。

width: 1170px;

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

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