Position checkboxes vertical each other other in Agular material - html

Question

I have some checkboxes, but they are positioned next each other and not under each other.
I have this:
.mat-header-cell mat-checkbox {
padding-top: 50px;
padding-right: 1px;
padding-left: -10px;
display: block;
}
.mat-header-cell:hover mat-checkbox {
padding-top: 50px;
padding-right: 1px;
padding-left: -10px;
display: block;
}
.mat-checkbox-inner-container{
display: block;
}
And this is the html:
<div class="col-sm-12" *ngFor="let item of returnProjectCodes; let i = index">
<mat-checkbox
(click)="$event.stopPropagation()"
(change)="selected = i"
[checked]="selelected === i"
>{{item.name}}
</mat-checkbox>
</div>
But the header 'projects' doesnt positioned correct anymore.[![enter image description here][1]][1]
<ng-container matColumnDef="projects">
<th mat-header-cell *matHeaderCellDef (mouseover)="show = true" (mouseout)="show = false" mat-sort-header i18n>
<div class="col">
<div class="row" *ngFor="let item of returnProjectCodes; let i = index">
<mat-checkbox (click)="$event.stopPropagation()" (change)="selected = i" [checked]="selelected === i"
>{{ item.name }}
</mat-checkbox>
</div>
</div>
Projects
</th>
<td mat-cell *matCellDef="let row">{{ row.projects }}</td>
</ng-container>

Answer 1

Not sure entirely what you are asking, but I assume it is for them to be in vertical order and not horizontal.
You can apply a CSS display as block as you are doing, however you should do it on the parent, and the col-sm-12 is probably keeping the width small so that they line up horizontally.
You can remove that and try setting the width to 100% (this probably wont be necessary, it should default to that width for a block div)
Please keep in mind the more context you can provide the better, such as a picture of what you have versus what you are going for.