Bootstrap 4 - Row of inputs 1% larger than full width - html

Question

So I have a simple form I've been messing with:
<div class="container">
<form name="form" method="post">
<div class="form-row mt-5">
<div class="col-3">
<label class="sr-only form-control-label required" for="form_column_name">Column Name</label>
<select id="form_column_name" name="form[column_name]" class="form-control-lg form-control"><option value="Field 1" selected="selected">Field 1</option><option value="Field 2">Field 2</option></select>
</div>
<div class="col-8">
<label class="sr-only form-control-label required" for="form_column_value">Column Value</label>
<input type="text" id="form_column_value" name="form[column_value]" required="required" class="form-control-lg form-control" placeholder="Query" />
</div>
<div class="col-1">
<button class="btn btn-primary btn-lg" type="button">Search</button>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<div class="progress" style="height: 25px;">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<table class="table" width="101%">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<input type="hidden" id="form__token" name="form[_token]" value="n0n-XzlZGwNC4-GUi8PiM5UYC25lSx_vMg7qwI7OPSg" />
</form>
</div>
It's a Symfony 3 Twig template, and it looks like this:
As you can see, the inputs are just slightly longer than the other elements, even though everything is at col-12.
Does anyone know how to fix this? I can set the progress bar to width: 101%, but I couldn't figure out the how to change the table. Also it feels a little hacky, so I'm wondering if there is a better solution.
Additionally, using container-fluid causes the size difference to change:
So I'm assuming I've setup the form wrong. I've tried using form-inline, but couldn't get the margins and centring to work that way either.

Answer 1

It looks like you need to reset padding on the button and give it a width:
<button class="btn btn-primary btn-lg pr-0 pl-0 w-100" type="button">Search</button>
demo below to play in full page
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form name="form" method="post" >
<div class="form-row mt-5">
<div class="col-3">
<label class="sr-only form-control-label required" for="form_column_name">Column Name</label>
<select id="form_column_name" name="form[column_name]" class="form-control-lg form-control"><option value="Field 1" selected="selected">Field 1</option><option value="Field 2">Field 2</option></select>
</div>
<div class="col-8">
<label class="sr-only form-control-label required" for="form_column_value">Column Value</label>
<input type="text" id="form_column_value" name="form[column_value]" required="required" class="form-control-lg form-control" placeholder="Query" />
</div>
<div class="col-1" style="flex-shrink:1">
<button class="btn btn-primary btn-lg pr-0 pl-0 w-100" type="button">Search</button>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<div class="progress" style="height: 25px;">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<table class="table" width="101%">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<input type="hidden" id="form__token" name="form[_token]" value="n0n-XzlZGwNC4-GUi8PiM5UYC25lSx_vMg7qwI7OPSg" />
</form>
</div>
you can also add responsive class to let room to the button text:
<div class="col-lg-8 col-sm-7">
<div class="col-lg-1 col-sm-2">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form name="form" method="post" class="m-0">
<div class="form-row mt-5">
<div class="col-3">
<label class="sr-only form-control-label required" for="form_column_name">Column Name</label>
<select id="form_column_name" name="form[column_name]" class="form-control-lg form-control"><option value="Field 1" selected="selected">Field 1</option><option value="Field 2">Field 2</option></select>
</div>
<div class="col-lg-8 col-sm-7">
<label class="sr-only form-control-label required" for="form_column_value">Column Value</label>
<input type="text" id="form_column_value" name="form[column_value]" required="required" class="form-control-lg form-control" placeholder="Query" />
</div>
<div class="col-lg-1 col-sm-2" style="flex-shrink:1">
<button class="btn btn-primary btn-lg pr-0 pl-0 w-100" type="button">Search</button>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<div class="progress" style="height: 25px;">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<table class="table" width="101%">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<input type="hidden" id="form__token" name="form[_token]" value="n0n-XzlZGwNC4-GUi8PiM5UYC25lSx_vMg7qwI7OPSg" />
</form>
</div>