Novamente estou com dificuldade em alinhar itens.
Gostaria que eles ficassem alinhadas os 3 inputs na mesma linha com margin, porém eles descem.
#contato {
margin-top: 120px;
}
#contato form {
width: 100%
}
#contato form input {
width: 33%;
float: left;
box-sizing: content-box;
font: 400 18px 'Open Sans', sans-serif;
padding: 15px;
border-radius: 3px;
border: 1px solid #aaa;
margin: 10px;
}
#contato form textarea {
float: right;
width: 100%;
font: 400 18px 'Open Sans', sans-serif;
padding: 15px;
border-radius: 3px;
border: 1px solid #aaa;
}
<div class="container">
<div id="contato">
<h2>Fale conosco</h2>
<div class="trbar"></div>
<form action="">
<input type="text" name="nome" placeholder="Nome">
<input type="email" name="email" placeholder="Email">
<input type="text" name="fone" placeholder="Fone">
<textarea name="mensagem" placeholder="Digite sua mensagem..."></textarea>
</form>
</div>
</div>