Bootstrap input borders overlap

Question

I'm writing a form group with two inputs, and have set {margin-left:-5px} for the second one to remove spacing between them. However, when the first input is focused, the blue glowing effect of the right border is missing. I think it's covered by the left border of the second input, so I've tried to increase its z-index, but it doesn't work. How to solve this problem? Here are the html and css codes, and the problem is shown in the picture.

<form class="form-inline">
    <div class="form-group">
        <input type="text" class="form-control" size="1" style="border-top-right-radius: 0; border-bottom-right-radius: 0">
        <input type="text" class="form-control" size="1" style="border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px">
    </div>
</form>

.form-control:focus {
    z-index: 2;
}

problem image

Answer 1

Just add position: relative;

.form-control:focus {

   position: relative;

}