bootstrap form-inline styling not touching
<p>I have the following HTML:</p>

<pre><code>&lt;form class="form-inline" role="form"&gt;
            &lt;div class="form-group"&gt;
                &lt;input class="form-control" type="text" placeholder="Your comments" /&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;button class="btn btn-default"&gt;Add&lt;/button&gt;
            &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>The issue I am facing is that these two elements aren't taking the entire line (they aren't touching). See here:</p>

<p><a href="https://i.stack.imgur.com/60yCR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/60yCR.png" alt="enter image description here"></a></p>

<p>Why is this the case?</p>

<p>Here is a fiddle show casing the problem: <a href="https://jsfiddle.net/nirchernia/pyfetd4p/" rel="nofollow noreferrer">https://jsfiddle.net/nirchernia/pyfetd4p/</a></p>