How to Remove Bullet Points in CSS

Use list-style: none when you want a list to look like a menu, button group, footer links, or a clean feature stack without default bullets. This is the standard way to remove list markers while keeping the semantic list structure.

What you’ll build or solve

You’ll learn how to remove bullet points in CSS the correct way. You’ll also know how to reset the leftover spacing so the list aligns cleanly.

When this approach works best

This approach is the right choice when bullets make the UI feel too content-heavy or when the list is really acting as navigation.

Common real-world scenarios include:

• Navigation menus
• Footer links
• Sidebar menus
• Button groups
• Clean pricing feature rows

This is a bad idea when the list is long-form article content where bullets improve readability.

Prerequisites

You only need:

• A basic HTML list
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Remove markers and reset list spacing

Apply list-style: none to the list container.

<ul class="nav-menu">
  <li>USA pricing</li>
  <li>UK docs</li>
  <li>France support</li>
</ul>

<style>
  .nav-menu {
    list-style: none;
  }
</style>

Then reset the default spacing so the alignment feels clean.

<style>
  .nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }
</style>

What to look for:

• list-style: none removes bullets
• Reset padding to remove indentation
• Reset margin for consistent alignment
• Keep the semantic <ul> and <li> structure
• Use Flexbox later if the list should become horizontal

Examples you can copy

Header navigation

<ul class="main-nav">
  <li>Home</li>
  <li>Pricing</li>
</ul>

<style>
  .main-nav {
    list-style: none;
    padding: 0;
    margin: 0;
  }
</style>

Footer links

<ul class="footer-links">
  <li>USA</li>
  <li>UK</li>
</ul>

<style>
  .footer-links {
    list-style: none;
    padding: 0;
  }
</style>

Pricing feature rows

<ul class="features">
  <li>USA cloud hosting</li>
  <li>France CDN</li>
</ul>

<style>
  .features {
    list-style: none;
    padding: 0;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Removing bullets but leaving indentation

What the reader might do:

.menu {
  list-style: none;
}

Why it breaks: the left padding stays, so the list still looks indented.

Corrected approach:

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

Mistake 2: Applying the rule to li instead of the list

What the reader might do:

li {
  list-style: none;
}

Why it breaks: the marker behavior is best controlled by the list container.

Corrected approach:

ul {
  list-style: none;
}

Mistake 3: Removing bullets from article content lists

What the reader might do:

.article-list {
  list-style: none;
}

Why it breaks: readers lose the visual scanning benefit of bullets.

Corrected approach:

Keep bullets for long-form content unless another visual system replaces them.

Troubleshooting

If the bullets disappear but the list still shifts right, reset padding-left to 0.

If the rule does not work, confirm the selector targets the <ul> or <ol>.

If the list is part of article content, reconsider whether bullets should stay.

If the layout needs horizontal links, combine the list with Flexbox.

Quick recap

• Use list-style: none to remove bullets
• Reset padding and margin for clean alignment
• Keep semantic list markup
• Apply the rule to the list container
• Keep bullets for content-heavy reading lists