I created an HTML page with the following code:
<div class="panel panel-default">
<div class="panel-heading">
<h1>Users</h1>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users | async">
<td>{{user.name}}</td>
<td>{{user.phone}}</td>
<td>{{user.email}}</td>
<td><button (click)="deleteUser(user.id)" class="btn btn-danger">Delete</button>
<button (click)="updateUser(user.id)" class="btn btn-info" style="margin-left: 10px">Update</button></td>
</tr>
</tbody>
</table>
</div>
</div>
The width is currently stretching out to fill the screen:
https://i.sstatic.net/41Tvp.png
How can I center it on the screen with some margin before and after the form?
I would like it to look like this: