Выровнять флажки по горизонтали

Question

Я пытаюсь, чтобы флажки циновки плавали горизонтально организованно. Вот HTML

<div class="container" style="float:left;padding:0px;">
    <ul *ngFor="let title of addonTitles" style="clear:both">
        <li style="padding:0px">
            <b>{{ title }}</b>
        </li>
        <div class="container" >
            <ul *ngFor="let addon of bs.addons" style="padding:0px;margin-top:5px;margin-bottom:5px;">
                <section *ngIf="addon.category === title" let i = index style="float:left;min-width: 125px;">
                    <mat-checkbox (change)="selectAddon($event)" [value]="addon.cbsCode">{{ addon.cbsCode }}</mat-checkbox>
                </section>
            </ul>
        </div>
    </ul>
</div>

Вот как у меня сейчас: