See the Pen bRaBgQ by Maxim (@PurpleEvolver) on CodePen.
Понял почему не работал padding-left. Его нужно прописывать в css ниже padding: 10px; чтобы padding-left перекрыл padding.
2 лайка
Потому что - при прочих равных - то, что ниже, перекрывает верхнее. Это из раздела “Наследование и каскадирование”. Чтение свойств браузером идёт СВЕРХУ вниз, поэтому то, что ниже, “сильнее” верхнего. Поэтому всё работает корректно: хотите изменить только левый паддинг - нужно прописать его ниже сводного свойства padding: 10px;