Не могу решить проблему с <ul>и <li>

Question

Я пытаюсь использовать этот фрагмент чата в угловом проекте.Дело в том, что я не могу включать части jquery, поэтому мне нужны только части HTML и CSS.Вот оригинал: https://bootsnipp.com/snippets/exR5v

Я скопировал его на Codepen, и слева от каждого пользователя в списке чата были маркеры.Я также добавил list-style-type:none;

Но он просто удалял маркеры, и вместо маркеров оставалось дополнительное поле.Вот ссылка на мой пример: https://codepen.io/artyombaykov/pen/pxGyjY Я внес изменения в этой части для удаления маркеров:

#frame #sidepanel #contacts ul li.contact {
  position: relative;
  padding: 10px 0 15px 0;
  font-size: 0.9em;
  cursor: pointer;
  list-style-type:none;
}

Как убрать лишний левый край, появившийся из-за маркеров

Answer 1

Добавить в ul list-style-type:none

#frame #sidepanel #contacts ul {
  list-style: none;
  padding: 0;
}

Answer 2

Как это исправить

Переопределение стиля элемента ul внутри #contacts до 0 или 0px.

#contacts ul {
    padding: 0px;
}

Добавление приведенного выше кода в таблицы стилей устранит проблему.

Почему это произошло

Это дополнительное заполнение было вызвано тем, что указанное ниже свойство добавлено в таблицы стилей, общие для всех элементов ul, menu, dir.

padding-inline-start: 40px;

Answer 3

Добавьте этот CSS, и он решит вашу проблему.

#frame #sidepanel #contacts ul {
    padding-left: 0px;
}