Can't identify what is causing extra space in a form field

Question

As you can see on the picture below and on JSFiddle http://jsfiddle.net/GRFX4/ I have some extra space in my text field of my form. It looks like for some reason it goes beyond the margin of the container. Any idea what the issue is? Many thanks

HTML:

<div id="contactwrapper">
<div class="block clear">
<div class="block-left">
<h1>Nous contacter</h1>
<div id="addressbox">
<h3>Centre de msd</h3>
      <p> 546, avenue ffds dfdsfd</p>
      <p> A-1234 fdfdfsf (Austria)</p>

        <ul id="contact">
          <li><i class="icon-phone-sign"></i> +352 691 123.456</li>
          <li><i class="icon-envelope"></i><a href="#"> geyi@iyiyiy.com</a></li>
          <li><i class="icon-map-marker"></i><a href="http://goo.gl/m2"> itinéraire</a></li>
        </ul>

</div>  <!-- End DIV addressbox -->

</div>  <!-- End DIV block-left -->
<div class="block-right">  <h1>Formulaire de contact</h1>
            <!-- CONTACT FORM-->
            <div class="contact-form">




                  <form id="contactfrm" method="post" class="clearfix">
                        <div class="clearfix">
                            <input id="name" name="name" placeholder="Nom" type="text" value="">
                            <input id="email" name="email" placeholder="Email" type="email" value="">
                        </div>

                        <textarea id="message" name="message" placeholder="Message et coordonnées"></textarea>

                        <input type="submit" value="Envoyer" name="submit">

      <p class="success" style="display:none">Merci pour votre message!<br> Nous vous répondrons très rapidement.</p>
      <p class="error" style="clear:both;display:none;color:red; text-align:center">Erreur: E-mail non valide et/ou message vide.</p>
                    </form>
                </div><!-- /.contact-form -->
    </div>  <!-- End DIV block-right -->
     </div>  <!-- End DIV Block -->
    </div>  <!-- End DIV Contactwrapper -->

CSS:

#contactwrapper {
    margin-top: 30px;
    padding-bottom: 30px;
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    background: #fff;
    -webkit-box-shadow: 0px 0px 10px 2px #e0e0e0;
    -moz-box-shadow: 0px 0px 10px 2px #e0e0e0;
    box-shadow: 0px 0px 10px 2px #e0e0e0;
}
.block-left {
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding-right: 20px;
}
.block-right {
    float: right;
    box-sizing: border-box;
    width: 50%;
}

.clear:after { clear: both }
.clear { clear: both }

#addressbox p {
    color: #333;
    font-weight: 400;
    font-size: 13px;
    line-height: 12px;
}
#contact li {
    display: inline;
    padding-right: 5px;
    color: #333;
    list-style: none;
    font-weight: 500;
    font-size: 13px;
}
#contact li a {
    border-bottom: none;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}
.coach1 li {
    margin: 0px;
    margin-bottom: 3px;
    margin-left: 10px;
    padding: 0px;
    color: #667878;
    list-style-type: none;
    font-weight: 300;
    font-size: 14px;
}

.contact-form input[type=text] {
    float: left;
    width: 200px;
}
.contact-form input[type=email] {
    float: right;
    width: 200px;

}
.contact-form input[type=submit] {
    float: right;
}
.contact-form textarea {
float: left;
    height: 70px;
    margin-bottom: 10px;
    margin-top: 20px;
    width: 100%;
}
/*************************************************************


/*************************************************************
 * FORMS
 *************************************************************/
form label { cursor: pointer }
form textarea,
form input[type=text],
form input[type=password],
form input[type=email] {
    background: #d5d5d5 url('../images/form-bg.png') left top repeat-x;
    border-top: 1px solid transparent;
    border-right: 1px solid #d2d2d2;
    border-bottom: 1px solid transparent;
    border-left: 1px solid #d2d2d2;
    color: #7c7c7c;
    font-family: 'Arial', sans-serif;
    padding: 6px 8px;
    resize: none;
}
form input:focus,
form textarea:focus {
    background: #d5d5d5 none;
    border: 1px solid red;
    outline: none;
}
form input[type=submit] {
    background: #0064C4 url('../images/form-caret.png') right center no-repeat;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: normal;
    padding: 8px 50px;
    text-transform: uppercase;
}

Answer 1

With Firefox, you can investigate such issues with the DOM inspector. Other Browsers have similar tools.

In the rules, you will see

.contact-form textarea {
    float: left;
    ...
    width: 100%;
}

and

form textarea {
    ...
    padding: 6px 8px;
}

The containing block (form) has a width of 50% of 980px, which is 490px. The content width of the textarea is also 490px (100%) wide. But additionally, the textarea has a padding of 8px to the left and the right side, which is causing the overflow.

So, you must either reduce the content width to 490px - padding

.contact-form textarea {
    float: left;
    ...
    width: 474px;
}

http://jsfiddle.net/GRFX4/3/

or remove the padding

.contact-form textarea {
    float: left;
    ...
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

http://jsfiddle.net/GRFX4/4/

Answer 2

You declared block-right div width as 50%. But textarea width is overflowing parent one. Try:

.block-right {
    float: right;
    box-sizing: border-box;
    width: 50%;
    overflow:hidden;
}

DEMO FIDDLE