Bootstrap input text in form-control is taking some unwanted margins

Question

I wanted to create a form using bootstrap. When tried to create it gave unwanted margin on the right of the input. I have tried to check out the margins in the browsers console. It might be a minor thing but unable to figure it out. I am also attaching a screen shot.

   <div class="col-lg-8 col-md-8 col-sm-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div id="tenantForm" class="container">
                        <center> <h4>Login Form</h4></center>
                        <hr />

                        <form>
                            <div class="form-group">
                                <label for="email">Email address:</label>
                                <input type="email" class="form-control" id="email">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" class="form-control" id="pwd">
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox"> Remember me</label>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div>
             </div>
    </div>
<div>

Answer 1

Remove the class container from <div id="tenantForm" class="container">

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="col-lg-8 col-md-8 col-sm-12"> <div class="panel panel-default"> <div class="panel-body"> <div id="tenantForm"> <center> <h4>Login Form</h4> </center> <hr /> <form> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </div> </div> 

Answer 2

Just remove class="container" from <div id="tenantForm" class="container"> , live demo here

https://codepen.io/msolimans/pen/KXjGBz