Элемент вынужден плавать вправо, но не должен

Я хочу, чтобы следующее поле ввода перемещалось влево. Я пробовал float: left и text-align: left в качестве родительского свойства. Решения с жестко закодированными пикселями, такие как padding, margin, position:relative и т. д., Работают, но это не то, что я ищу.

HTML

<ng-container matColumnDef = "number">
  <mat-header-cell mat-sort-header arrowPosition = "before" class = "matTable numberHeaderCell" >
    <input type = "text" class = "tabHeadInputField numberInputField"/>
  </mat-header-cell>
  <mat-cell class = "matTable numberBodyCell">
    {{row.workingNumber}}
  </mat-cell>
</ng-container>

CSS

.matTable.numberHeaderCell {
  border: 1px solid black;
}

.matTable.numberBodyCell {
  text-align: left;
}

.tabHeadInputField.numberInputField {
  float: left;
}