Input boxes not spaced when viewport is resized (bootstrap)

Question

I'm currently creating a sign up form using bootstrap and I was making the first name and last name text boxes inline but when I resize the browser by compacting it, the display of both text boxes seem to stick? I've tried using inline-block and also margin but it'll affect the others too which would look odd. Here is an sample. (You'd have to zoom-out to see the effect.)

http://jsfiddle.net/5ghc1r18/6/

<div class="container">
    <div class="wrapper">
        <div class="row">
            <div style="overflow:auto;width:90%" class="col-lg-10">
                <form id="form" action="welcome.php" class="form-horizontal" method="POST">
                        <h1 class="text-center">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Sign Up
                        </h1> 
                    <div class="form-group">
                        <div class="col-lg-6">
                            <input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/>
                        </div>
                        <div class="col-lg-6">
                            <input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12">
                            <input type="email" placeholder="Email Address" name="email" class="form-control" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12">
                            <input type="text" placeholder="Mobile" name="mobile" class="form-control" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12">
                            <label for="day">Date of Birth:</label>
                            <div id="date1" class="datefield">
                                <input id="day" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="DD" />/
                                <input id="month" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="MM" />/
                                <input id="year" type="tel" onkeypress="return isNumberKey(event)" maxlength="4" placeholder="YYYY" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-12">
                            <select name="gender" class="form-control" required>
                                <option value="">Select one</option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                                <option value="Others">I'm not sure</option>
                            </select>
                        </div>
                    </div>
                    <div class="form group">
                        <div style="width:100%">
                            <button type="submit" class="btn btn-success btn-block">    <i class="fa fa-plus"></i> Sign up!</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Thanks for the help!

Answer 1

You can give margin to the input boxes:

input[type="text"] { margin: 10px auto; }

Answer 2

The problem in your HTML is here

<div class="form-group">
    <div class="col-lg-6">

put <div class="form-group"> inside the <div class="col-lg-6"> currently you are doing opposite.

e.g;

<div class="col-lg-6">
    <div class="form-group">
        <input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/>
    </div>
</div>

<div class="col-lg-6">
    <div class="form-group">
        <input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/>
    </div>
</div>