連絡先フォームのdiv内に入力フィールドを残すことができません

Question

HTML5とCSS3のコースが終わりましたが、今は練習を開始しましたが、本当に単純なものに固執しました。 Googleで修正プログラムを検索しましたが、見つかりませんでした。大部分は{ボックスサイズ：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-の-2を使用する以外それは、一種の同様の鉱山へのです。

grid.cssファイルはresponsivegridsystem（ドット）comからダウンロードされます。

その他の情報が必要な場合は、お知らせください。

どんな種類のヘルプでも大歓迎です！

ありがとうございました！

Answer 1

コンタクトフォームの親コンテナは、クラス.rowに属し、1170pxの固定幅を取得します。それからcontact-formはそのサイズの80％でマージンがautoと定義されます。マージンは1170pxの20％、両側に10％となります。 1170pxの制限を解除することで修正できます。あなたは、より幅広いレイアウトを実現するために、最小幅と最大幅のプロパティを見ることができます。

Answer 2

行の幅を明示的に設定しているため、問題が発生しています。

width: 1170px; 

この行を削除すると、HTMLが表示されます。

はこのペンを参照してください：http://codepen.io/vici0us/pen/mRqJXK?editors=1100