How to align items with HTML and CSS?

Question

Again I’m having trouble aligning items.

I would like them to align the 3 inputs in the same line with margin, but they go down.

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

Answer 1

Do so

#contato {
  margin-top: 120px;
}

#contato form {
  width: 100%
}

#contato form input {
  width: calc(33% - 20px);
  float: left;
  box-sizing: content-box;
  font: 400 18px 'Open Sans', sans-serif;
  padding: 15px;
  border-radius: 3px;
  border: 1px solid #aaa;
  margin: 10px;
  box-sizing: border-box;
}

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

In the above example, I added to the value of width the calc(33% -20px). But why? Because, as you used margin: 10px, 10px space for each side counts as input, and this makes it "push" the element down, when it exceeds the 100%. So when using -20px I’m adapting the value to fit inside the #contato form.

Besides, I put in box-sizing: border-box, which forces the CSS to calculate the size of the element along with the padding and border, thus avoiding the old calculations we had to do at hand, to hit the size of the element after using these attributes.

In the case, box-sizing only serves to adjust the value of padding and border, then the margin still needs to be "calculated".

Answer 2

I replicated your example using Flexbox

#contato {
  margin-top: 120px;
}

#contato form {
  width: 100%
  display: flex;
}

.input-flex {
    display: flex;
}

.input-flex > input {
    width: 33%;
}

#contato form input {
  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 {
    width: 94%;
    font: 400 18px 'Open Sans', sans-serif;
    padding: 15px;
    border-radius: 3px;
    border: 1px solid #aaa;
    margin: 10px;
}

<div class="container">
  <div id="contato">
    <h2>Fale conosco</h2>
    <div class="trbar"></div>
    <form action="">
      <div class="input-flex">
          <input type="text" name="nome" placeholder="Nome">
          <input type="email" name="email" placeholder="Email">
          <input type="text" name="fone" placeholder="Fone">
      </div>
      <textarea name="mensagem" placeholder="Digite sua mensagem..."></textarea>
    </form>
  </div>
</div>