There appears to be some extra space in the text field of my form, extending beyond the container margin. Please refer to the image and JSFiddle http://jsfiddle.net/GRFX4/. Any thoughts on what might be causing this issue? Thank you.
HTML:
<div id="contactwrapper">
<div class="block clear">
<div class="block-left">
<h1>Contact Us</h1>
<div id="addressbox">
<h3>MSD Center</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="#"> [email protected]</a></li>
<li><i class="icon-map-marker"></i><a href="http://goo.gl/m2">directions</a></li>
</ul>
</div> <!-- End DIV addressbox -->
</div> <!-- End DIV block-left -->
<div class="block-right"> <h1>Contact Form</h1>
<!-- CONTACT FORM-->
<div class="contact-form">
<form id="contactfrm" method="post" class="clearfix">
<div class="clearfix">
<input id="name" name="name" placeholder="Name" type="text" value="">
<input id="email" name="email" placeholder="Email" type="email" value="">
</div>
<textarea id="message" name="message" placeholder="Message and contact details"></textarea>
<input type="submit" value="Send" name="submit">
<p class="success" style="display:none">Thank you for your message!<br>We will respond promptly.</p>
<p class="error" style="clear:both;display:none;color:red; text-align:center">Error: Invalid email and/or empty message.</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;
}