Как сделать список css?

у меня после list-style none слева всё равно дырка была, оказалось padding не обнулил, теперь всегда пишу их вместе

Вывод: используй ul/ol с list-style для настройки маркеров, а не рисуй точки вручную через ::before на div.

Причина первая: список это семантика, скринридер объявляет количество пунктов и их порядок, если это настоящий ul или ol, а не набор div подряд, который читалка воспримет как несвязанный текст.

Причина вторая: list-style-type даёт готовые варианты маркеров, disc, circle, square, decimal для нумерации, без единой строчки лишнего css, и это работает во всех браузерах одинаково предсказуемо.

Причина третья: когда маркеры совсем не нужны, list-style: none убирает их, но оставляет padding слева, который тоже придётся обнулить отдельно, это частый момент который забывают.

• Используйте ul для ненумерованного списка, ol для нумерованного, это не взаимозаменяемые теги, выбор зависит от того важен ли порядок пунктов по смыслу.
• Каждый пункт оборачивайте в li, вложенные списки допустимы, li может содержать внутри себя ещё один ul или ol для подпунктов.
• list-style-type меняет вид маркера: disc, circle, square для ненумерованных, decimal, lower-alpha, upper-roman для нумерованных, значений хватает почти на любой случай оформления.
• list-style-position: inside или outside определяет, будет ли маркер внутри блока текста пункта или снаружи, это влияет на перенос текста при многострочных пунктах, outside обычно выглядит аккуратнее для длинного текста.
• Полное отключение маркеров через list-style: none не убирает автоматически отступ слева, потому что этот отступ идёт от padding самого ul, который в разных браузерах может отличаться, поэтому надёжнее явно обнулить padding-left вместе с list-style.
• Для горизонтального списка, вроде меню или тегов, list-style: none комбинируют с display: flex на родительском ul и gap для отступов между пунктами вместо маркеров.
• Кастомные маркеры через content в псевдоэлементе ::marker дают больше контроля над цветом и размером точки, чем стандартный list-style-type, но поддержку в старых браузерах стоит проверить отдельно перед использованием в продакшене.
• Не удаляйте семантику ul/li ради удобства вёрстки, замена списка на div с ::before для имитации точки лишает содержимое структуры, которую используют вспомогательные технологии.