Bootstrap input-group button is right aligned - asp.net

Question

How can I align the search button to be next to the search box?
Code is
<div class="form-group">
<label class="col-lg-2 control-label" for="inputLoginSearch">Search for HOA</label>
<div class="col-lg-10">
<div class="input-group">
<input id="inputLoginSearch" class="form-control" type="text" placeholder="Enter search phrase">
<span class="input-group-btn">
<button class="btn btn-info" type="button">Search</button>
</span>
</div>
</div>
</div>
Edit - added full markup of page
<div id="mainDiv" runat="server" class="panel-body">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Standard Login</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<%-- Start of Standard Login--%>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div id="StandardLoginForm" role="form" class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputLoginSearch">Search for HOA</label>
<div class="col-lg-10">
<div class="input-group">
<input id="inputLoginSearch" class="form-control" type="text" placeholder="Enter search phrase">
<span class="input-group-btn" >
<button class="btn btn-info" type="button">Search</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="select">HOA</label>
<div class="col-lg-10">
<select class="form-control" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputUserName">User Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputUserName" type="text" placeholder="User Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputPassword">Password</label>
<div class="col-lg-10">
<input class="form-control" id="inputPassword" type="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-primary" type="submit">Login</button>
</div>
</div>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<%--End of Standard Login--%>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">HOA Manager Integrated Login</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<%-- Start of Standard Login--%>
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<%--End of Standard Login--%>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
If I create a brand new 'out of the box' WebForms project in VS2013 the same thing happens. Also form-vertical makes a complete mess of everything, only form-horizontal works.

Answer 1

DavidG was right about the issue - the problem was removing the max-width for inputs made them spread right across the entire page - so the workaround I found was to leave the max-width in, and just change the input-group div to a max-width (allowing for the button) and then setting in the input at width:100%;
This seems to work well.
<div class="form-group form-group-sm">
<label class="col-lg-2 control-label" for="inputLoginSearch">Search for HOA</label>
<div class="col-lg-10">
<div class="input-group" style="max-width: 358px;">
<input id="inputLoginSearch" runat="server" class="form-control" type="text" placeholder="Enter search phrase" style="width: 100%;"/>
<span class="input-group-btn">
<button id="SearchButton" runat="server" class="btn btn-info" type="button">Search</button>
</span>
</div>
</div>
</div>