Bootstrap remove space on left of button - html

Question

For some reason, my first button has a space before it and I can't get rid of it.
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-3">
<button #onclick="ShowModal" class="btn btn-primary"><i class="oi oi-plus"></i>New Member</button>
</div>
<div class="col-xs-4 col-md-3" style="margin:auto">
<button #onclick="#RefreshData" class="btn btn-primary"><i class="oi oi-loop-circular"></i> Refresh Data</button>
</div>
<div class="input-group col-xs-4 col-md-4 offset-md-5">
<input type="text" class="form-control" placeholder="Search Members" #bind="#searchTerm" />
<div class="input-group-append">
<button #onclick="#SearchMember" class="btn btn-primary"><i class="oi oi-magnifying-glass"></i></button>
</div>
</div>
</div>
This how it looks
This forces the search to go on the next row. How can I fix this?

Answer 1

It's a problem with margins; just make sure you get rid of the left margin. If you're ever in doubt about what a space is, take a peek at the element in dev tools and it'll normally help you out.
div.container {
margin-left: 0px
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-3">
<button #onclick="ShowModal" class="btn btn-primary"><i class="oi oi-plus"></i>New Member</button>
</div>
<div class="col-xs-4 col-md-3" style="margin:auto">
<button #onclick="#RefreshData" class="btn btn-primary"><i class="oi oi-loop-circular"></i> Refresh Data</button>
</div>
<div class="input-group col-xs-4 col-md-4 offset-md-5">
<input type="text" class="form-control" placeholder="Search Members" #bind="#searchTerm" />
<div class="input-group-append">
<button #onclick="#SearchMember" class="btn btn-primary"><i class="oi oi-magnifying-glass"></i></button>
</div>
</div>
</div>