title: Place input fields in a row to fit full container width
body: <p>I try to put three input fields in a row, with a little bit of space next to each other, so it doesnt look odd.
  Anyway the third input always gets a new line, why is that and how to fix it?</p>
  
  <p>What I want to achieve, see picture.</p>
  
  <p><img src="https://i.stack.imgur.com/vAoZq.jpg" alt="enter image description here"></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div id="form"&gt;
  &lt;form&gt;
      &lt;input type="text"&gt;
      &lt;input type="text"&gt;
      &lt;input type="text"&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>#form{
  width: 600px;
  border: 1px solid black;
  }
  
  #form input {
  width: 33.33%;
  display: inline-block;
  margin: 0 1.1% 0 0;
  padding: 0;
  }
  </code></pre>