Form fields overflow Bootstrap form
<p>I am playing around with Bootstrap grid framework in my simple form. For some reason the form fields seem to overflow the form border box. See image below. </p>

<p><a href="https://i.stack.imgur.com/3lVKz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3lVKz.png" alt="enter image description here"></a>
This doesn't make sense because all my form field elements are inside the form. My html is here. I have made sure to import Bootstrap css and Bootstrap js. </p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt;

            &lt;form class="col-md-8 form"&gt;
                &lt;h4 class="form-heading"&gt;A form&lt;/h4&gt;

                &lt;div class="form-group"&gt;
                    &lt;div class = "col-md-6"&gt;
                        &lt;input type="text" name="input1" class="form-control"/&gt;
                    &lt;/div&gt;

                    &lt;div class = "col-md-6"&gt;
                        &lt;input type="text" name="input2" class="form-control"/&gt;
                    &lt;/div&gt;

                    &lt;div class = "col-md-12"&gt;
                        &lt;textarea name="terms" rows="8" class="form-control"&gt;&lt;/textarea&gt;
                    &lt;/div&gt;

                    &lt;div class="col-md-12 text-center"&gt;
                        &lt;button type="submit" class="btn btn-lg btn-primary"&gt;Submit&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My css is here. </p>

<pre><code>.form {
    max-width: 100%;
    border: solid black;
    padding-top: 20px;
    margin-top: 30px;
    float: none;
}

.form .form-heading {
    text-align: center;
}

.form .form-control {
    position: relative;
}

input {
    max-width: 100%;
    max-height: 100%;
}
</code></pre>

<p>Please share any ideas on a fix. </p>