How to reduce width of a form (CSS/HTML) - html

Question

I have this html page:
<div class="panel panel-default">
<div class="panel-heading">
<h1>Usuarios</h1>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Nome</th>
<th>Telefone</th>
<th>Email</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let usuario of usuarios | async">
<td>{{usuario.nome}}</td>
<td>{{usuario.telefone}}</td>
<td>{{usuario.email}}</td>
<td><button (click)="deleteUsuario(usuario.id)" class="btn btn-danger">Delete</button>
<button (click)="updateUsuario(usuario.id)" class="btn btn-info" style="margin-left: 10px">Update</button></td>
</tr>
</tbody>
</table>
</div>
</div>
The width is following the navbar, so it's being stretched all the screen:
How can I reduce it to the center of the screen like a have a margin before and after the form?
I want it to be like this:

Answer 1

Looking at your screenshot I guess you are using Materialize CSS:
Try to the form code within below code:
<div class="container">
<div class="col s12">
<div class="panel panel-default">
<div class="panel-heading">
<h1>Usuarios</h1>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Nome</th>
<th>Telefone</th>
<th>Email</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let usuario of usuarios | async">
<td>{{usuario.nome}}</td>
<td>{{usuario.telefone}}</td>
<td>{{usuario.email}}</td>
<td><button (click)="deleteUsuario(usuario.id)" class="btn btn-danger">Delete</button>
<button (click)="updateUsuario(usuario.id)" class="btn btn-info" style="margin-left: 10px">Update</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

Answer 2

Just add this style code:
form {
max-width: 900px;
margin-left: auto;
margin-right: auto
}