Так задайте списку display flex и выравнивание space-between или space-around или space-evenly.
Предварительно разобравшись с его шириной. Обведите рамочкой, если не понятно.
У вас не так много вариантов.
1. Открыть инструменты разработчика и посмотреть что перебивает ваши стили. После этого, вероятнее всего, понадобится погуглить про специфичность. Или media не в том порядке.
2. Сделать песочницу на jsfiddle.net, а потом, вероятнее всего вон та история про специфичность.
3. Либо где-то просто глупая ошибка со скобками или типа того.
Используйте button вместо input.
Текст пишите в спан с классом visually-hidden (гуглится по словам "паттерн visually-hidden" или "css доступное скрытие").
А потом делайте для кнопки фон или ради чего вы всё это затеяли.
Судя по шапке таблицы, уменьшать шрифт там некуда и когда она заполнится, то тоже не влезет.
Поэтому, делают скролл только для таблицы.
Можно добавить sticky для первого столбца.
Либо на мобилках менять display на флекс или грид и выстраивать ячейки внутри строки как-то по-другому.
Например, на первой слоит, имя и статус. Остальное ниже.
Если нельзя менять разметку, делайте псевдоэлементом.
Задавайте ему ширину 100vw и позиционируйте.
На ближайшего родителя, имеющего ширину окна, не забудьте повесить overflow-x hidden.
50 : 7 = 7 (остаток 1) и собственно что это мне даст? Позиция не верная.
Какое 50?
Вам же номер строки нужно узнать.
7 делите на количество столбцов, округляете в большую сторону.
Получаете строку (R).
Вычитаете из 7 количество ячеек умноженное на количество полных занятых строк.
7 - (5*(R - 1))
получаете столбец.
