Je ne peux pas obtenir de champs de saisie pour rester à l'intérieur du div

Question

Je viens de terminer de nombreux cours pour HTML5 et CSS3 et maintenant j'ai commencé à m'exercer, mais je suis vraiment resté coincé sur quelque chose qui devrait être simple. J'ai recherché sur Google un correctif, mais je n'en ai trouvé aucun. La plupart disaient d'ajouter {box-sizing: border-box;}, mais j'avais déjà ça.

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

code 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; 
} 

Voilà comment la forme ressemble à: http://codepen.io/anon/pen/apVzyg

Comme vous pouvez le voir, les champs sont poussés vers la droite, au lieu de rester dans la rangée et le conteneur du formulaire de contact, qui est fixé à 80%. Pour la vie de moi, je ne peux pas comprendre pourquoi cela se produit. Peut-être que l'erreur est en face de moi, mais j'ai maintenant une vision en tunnel.

J'ai fait ce basé sur le style et l'exemple de l'instructeur, que vous pouvez consulter ici: http://codepen.io/anon/pen/VPrYqm

Il est un peu semblable à la mienne, sauf que je ne l'utilise pas l'étiquette et j'utilise col 1-of-2.

Le fichier grid.css est téléchargé à partir de responsivegridsystem (dot) com.

Si vous avez besoin d'autres informations, s'il vous plaît faites le moi savoir.

Toutes sortes d'aide serait très appréciée!

Merci!

Answer 1

Le conteneur parent formulaire de contact appartient à la classe .row et obtenir une largeur fixe de 1170px. Ensuite, le formulaire de contact est défini comme étant 80% de cette taille et la marge automatique. donc les marges seront de 20% de 1170px, 10% de chaque côté. Vous pouvez le réparer en supprimant la restriction 1170px. Vous pourriez jeter un oeil aux propriétés min-width et max-width pour obtenir une mise en page plus adaptable.

Answer 2

Le problème survient car vous définissez explicitement la largeur de ligne.

width: 1170px; 

Supprimer cette ligne et vous obtiendrez le rendu de votre code HTML.

Voir ce stylo: http://codepen.io/vici0us/pen/mRqJXK?editors=1100