ASP.NET webforms fields not aligning properly - css

Question

I have the following registration form that I have built in ASP.NET webforms using VS 2017 using Bootstrap 3.4.1.
I had used the same code on with Bootstrap 2 some time ago and it worked great:
The drop down and button are a little wider than the text boxes. How do I fix this.
Code for Register.aspx
<div class="col-sm-5 col-xs-5">
<div class="col-xs-12">
<h4>Create a new account</h4>
<hr />
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<asp:DropDownList runat="server" ID="UserName" CssClass="form-control" TextMode="UserName" placeholder="UserName" />
</div>
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" Display="Dynamic"
CssClass="text-danger" ErrorMessage="The UserName field is required." />
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-star-empty"></span></span>
<asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" placeholder="Password" />
</div>
<asp:RequiredFieldValidator runat="server" ControlToValidate="Password" Display="Dynamic"
CssClass="text-danger" ErrorMessage="The password field is required." />
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
<asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" CssClass="form-control" placeholder="Confirm Password" />
</div>
<asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmPassword"
CssClass="text-danger" Display="Dynamic" ErrorMessage="The confirm password field is required." />
<asp:CompareValidator runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
CssClass="text-danger" Display="Dynamic" ErrorMessage="The password and confirmation password do not match." />
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt"></span></span>
<asp:TextBox runat="server" ID="PhoneNumber" TextMode="SingleLine " CssClass="form-control" placeholder="Phone Number" />
</div>
<asp:RequiredFieldValidator runat="server" ControlToValidate="PhoneNumber" Display="Dynamic"
CssClass="text-danger" ErrorMessage="The phone number field is required." />
<div class="form-group">
<asp:Button runat="server" OnClick="CreateUser_Click" Text="Register" CssClass="btn btn-block btn-default" />
</div>
<div class="form-group">
<p>
By clicking on "Register", you agree to the <a data-toggle="modal" href="#termsOfUseModal">Terms of Use</a> and the
<a data-toggle="modal" href="#privacyModal">Privacy Policy</a>.
</p>
</div>
<asp:PlaceHolder runat="server" ID="DisplayEmail" Visible="false">
<p class="text-info">
Please check your email and confirm your email address.
</p>
</asp:PlaceHolder>
</div>
</div>

Answer 1

Finally fixed it by having this code in Site.css.
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Responsive: Portrait tablets and up */
#media screen and (min-width: 768px) {
.jumbotron {
margin-top: 20px;
}
.body-content {
padding: 0;
}
}
/* make sidebar nav vertical */
#media (min-width: 768px) {
.sidebar-nav {
margin-top: 20px;
}
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not(.dropdown-menu) {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}