Can't change table size

I am trying to create a table and have it on the right side of the screen but I just can't get it to change size so it doesn't take up the whole screen without making everything become unaligned.

<table mat-table [dataSource]="dataSource" id = "skills" class = "skills">
<ng-container matColumnDef="Skill">
<th mat-header-cell *matHeaderCellDef class = "name">
<strong>Skill</strong>
</th>
<td mat-cell *matCellDef="let element" class = "name">
{{element.name}}</td>
</ng-container>
<ng-container matColumnDef="Years of Experience">
<th mat-header-cell *matHeaderCellDef class = "rank">
<strong>Years</strong>
</th>
<td mat-cell *matCellDef="let element" class = "rank">
{{element.exp}}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>


.skills {
border: 1px;
border-color: black;
border-style: solid;
margin: auto;
display: table;
width: 20vw;
float: right;
}
.skills .name {
text-align: center;
margin: auto;
border-left: 1px;
border-right: 1px;
border-style: solid;
border-color: black;
}
.skills .rank {
text-align: center;
margin: auto;
border-right: 1px;
border-color: black;
border-style: solid;
}
#skills {
display: table;
float: right;
}


I can change the display to decrease the size of the columns by adding skills as a class to the tag but then they are not only unaligned but start going from right to left.

Continue reading...