横幅100%でもはみ出ないフォームCSSサンプル

NAME

TEXT

スマートフォン表示向けに横幅100%でもはみ出ないフォームCSSのサンプルです
「box-sizing:border-box;」でボーダーを内側にしてますが、サンプルではボーダーも消してます

HTML

<form action="#" method="post">
<p>NAME</p>
<input type="text" name="name" value="NO NAME" />
<p>TEXT</p>
<textarea name="textarea1" rows="8" cols="40">NO BORDER</textarea>
<input type="submit" name="button1" value="SUBMIT" />
</form>

CSS

#container{
padding: 0;
}

p{
margin:0.5em 1em;
}

textarea {
width:100%;
font-size:1.2em;
box-sizing:border-box;
border:none;
background: #d6ffff;
padding: 1em;
margin:0;
}

input[type="text"] {
width:100%;
font-size:1.2em;
box-sizing:border-box;
border:none;
background: #d6ffff;
padding: 1em;
margin:0;
}

input[type="submit"] {
width:100%;
height: 50px;
color: #FFF;
border: none;
background: #0099CC;
cursor:pointer;
margin:1em 0;
}