unordered list- first list item is raised in position - html

Question

Does anybody know why the first li item is raised in its position. And it only happens when I add id or class to the div.
Here is code:
<div id="pickList">
<ul *ngFor="let channel of currentPickSelection">
<li class="list-group-item" style="float:Left;margin:1px;" (dragover)="onDragOver(channel[0])" (drop)="onDrop()"
[ngStyle]="{'background-color': channel[0].compChannel[0].compChannelLogo.length !== 0 ? '#8EC0D1' : 'aliceblue' }">
<ng-container *ngIf="channel[0].compChannel[0].compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel[0].logo }}" alt="{{ channel[0].channel }}" width="50" height="50">
<img class="img-rounded" src="{{ channel[0].compChannel[0].compChannelLogo }}" alt="{{ channel[0].compChannel[0].compChannelName }}"
width="50" height="50">
</ng-container>
<br>
<div align="center">
<strong>
<font size="2">{{ channel[0].pickCode }}</font>
</strong>
</div>
</li>
</ul>
</div>
Here is the CSS:
#pickList {
height:565px;
scroll-behavior: auto;
overflow:auto;
}

Answer 1

I figured it out this way, by adding an extra div in between
<div class="row pickList" align="center">
<div>
<ul *ngFor="let channel of currentPickSelection">
<li class="list-group-item" style="float:Left;margin:1px;" (dragover)="onDragOver(channel[0])" (drop)="onDrop()" [ngStyle]="{'background-color': channel[0].compChannel[0].compChannelLogo.length !== 0 ? '#8EC0D1' : 'aliceblue' }">
<ng-container *ngIf="channel[0].compChannel[0].compChannelLogo.length !== 0; else noCompChannel">
<img class="img-rounded" src="{{ channel[0].logo }}" alt="{{ channel[0].channel }}" width="50" height="50">
<img class="img-rounded" src="{{ channel[0].compChannel[0].compChannelLogo }}" alt="{{ channel[0].compChannel[0].compChannelName }}"
width="50" height="50">
</ng-container>
<br>
<div align="center">
<strong>
<font size="2">{{ channel[0].pickCode }}</font>
</strong>
</div>
</li>
</ul>
</div>
</div>