Bootstrap button shifted to the right outside containing div - html

Question

I've got a very simple bootstrap page that has a div with a column of buttons in it. For no apparent reason the buttons are shifted slightly to the right:
The containing div (as highlighted above) has no padding or margin:
and the buttons have the same margin applied on both sides:
associated html:
<div class="cinema-list" style="max-width: 700px;" class="m-auto">
<h2>Select Cinema</h2>
<div class="form-group">
<label for="cinemaSearchInput">Search</label>
<input
type="text"
class="form-control"
id="cinemaSearchInput"
placeholder="Cinema name..."
[(ngModel)]="searchString"
>
</div>
<div *ngIf="cinemaList != null">
<button
*ngFor="let cinema of cinemaList"
type="button"
class="btn btn-primary cinema-button m-1 w-100"
(click)="selectCinema(cinema)"
>
<span>{{cinema.name}}</span>
<i
*ngIf="isFavoriteCinema(cinema)"
class="fa fa-heart pl-1 heart"
aria-hidden="true"></i>
</button>
</div>
<div
*ngIf="cinemaList == null"
class="d-flex align-items-center pt-2">
<span class="spinner-border text-primary mr-2"></span>
<span>Loading...</span>
</div>
</div>
and scss:
.cinema-list{
.cinema-button{
display: block;
}
.cinema:hover{
background-color: $primary;
}
}
I can't see any reason why the buttons are shifted. Is this a bug with bootstrap?
This is boostrap 4.3.1
Thanks

Answer 1

It is because you added class m-1 in the button. please remove that class from it.
Replace
class="btn btn-primary cinema-button m-1 w-100"
With
class="btn btn-primary cinema-button w-100"
Hope this will help you.

Answer 2

Please use my-1 and mx-0 class instead of m-1 class.
<button
*ngFor="let cinema of cinemaList"
type="button"
class="btn btn-primary cinema-button my-1 mx-0 w-100"
(click)="selectCinema(cinema)"
>
<span>{{cinema.name}}</span>
<i
*ngIf="isFavoriteCinema(cinema)"
class="fa fa-heart pl-1 heart"
aria-hidden="true"></i>
</button>

Answer 3

Alok Mali's answer fixes the issue.
I can't see any reason why the buttons are shifted. Is this a bug with bootstrap?
No, this is how CSS is designed.
This is the root cause why this is happen.
In Bootstrap by default all elements have box-sizing:border-box;
This is done by reset.scss
*,
*::before,
*::after {
box-sizing: border-box; // 1
}
For border-box the width and height properties of an element include the content, padding, and border, but do not include the margin. In your case you have a margin of .25em when you applied class m-1, thats why your element (button in this case) overlflowed.
More read of box-sizing here
Hope this helps.