角度HTML格式错误

这是关于我昨天发布的问题 一切都正常，但现在无法打破争吵。如下图所示，行“G”在同一行上有“H”和“I”。只是试着让每个字母表和它的频道都在自己的行上。我在底部也附加了HTML。 请告知。

{{head}}



{{channel.cbsCode}
{{channel.pickCode}

上述问题的工作副本@Chris Happy和@Sumchans

.w3 ul>h1{
宽度：40px；
浮动：左；
}
.标志显示{
浮动：左；
}
.w3 ul>h1.LOGO显示{
display:inline block；//如果需要，请使用！重要信息
}

标题



代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码



标题



代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码




代码
选择码



标题
<div class="w3-container w3-threequarter">
  <ul class="w3-ul w3-card-1" *ngFor="let head of channelDisplayHeads">
    <h1 align="center" style="background-color:#0083BC;">
      <font color="white">{{ head }}</font>
    </h1>
    <ng-container *ngFor="let channel of channelList">
      <li class="list-group-item logoDisplay" *ngIf="channel.channel.substr(0, 1) === head">
        <img class="w3-image" src="{{ channel.logo }}" align="center" alt="{{ channel.channel }}" width="80" height="80">
        <br>
        <span class="w3-left">
          <mark>
            <font size="1">{{ channel.cbsCode }}</font>
          </mark>
        </span>
        <span class="w3-sand w3-right">
          <font size="2">{{ channel.pickCode }}</font>
        </span>
      </li>
    </ng-container>
  </ul>
</div>