How to remove list bullets

Short answer

list-style: none removes the bullets, and padding: 0 removes the left indent:

<ul style="list-style: none; padding: 0;">
  <li>First item</li>
  <li>Second item</li>
</ul>

Where the indent comes from

The browser adds a left indent to a list on its own — that is where the bullets are drawn. It is usually padding-left, so without padding: 0 the items stay shifted right even without bullets. A list also has a top and bottom margin: reset it too if needed.

A list of cards

Without bullets a list easily turns into a set of cards or a menu while keeping the correct markup:

<style>
  .cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
  .cards li { padding: 10px; border-radius: 8px; background: whitesmoke; }
</style>
 
<ul class="cards">
  <li>Tea — $3</li>
  <li>Coffee — $5</li>
</ul>

Common mistake

To get rid of the bullets the list is replaced with a set of <div> elements. It looks the same, but screen readers no longer announce "list, three items". Keep <ul> and <li>, and remove the bullets in CSS.