list-style: none in CSS - Remove Bullets and Build a Navbar

In modern UI design, default list styling rarely fits navbars or sidebars. The first professional step is removing the default list styling.

If you are looking for how to remove bullets from ul in CSS, list-style none not working, or building a navbar with ul li, this lesson is for you.

What Is list-style: none in CSS?

The list-style property controls list markers. When you write list-style: none;, bullets or numbers disappear completely.

Simple definition: list-style: none in CSS removes the default markers from ul or ol.

Remove Bullets from ul in CSS

ul {
    list-style: none;
}

What does this code do? Removes bullets from all unordered lists.

Expected result: the list has no markers before items.

Common mistake: applying the rule to li instead of ul in some cases.

Reset margin and padding for lists in CSS

Browsers add default spacing to lists. To get full control, reset both margin and padding.

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

What does this code do? Removes bullets and default spacing together.

Expected result: a clean list ready for custom styling.

Common mistake: forgetting either margin or padding, so extra spacing remains.

Turn ul into a Horizontal Navbar

After resetting the list, you can place items side-by-side with Flexbox.

ul.nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

ul.nav a {
    text-decoration: none;
}

What does this code do? Creates a clean horizontal navigation list.

Expected result: a modern navbar with no bullets and balanced spacing.

Common mistake: forgetting to remove underline from links, which makes the navbar look unfinished.

Why Use ul/li for Navbars?

• Semantic: represents a list of links correctly.
• Easier to maintain and extend.
• Better accessibility when styled properly.

Common Mistakes with list-style none in CSS

1) Removing bullets only: leaving default margin/padding.

2) Breaking alignment in RTL layouts: not accounting for direction when needed.

3) Removing markers without hover/active styles: links look unclear.

FAQ - Common Search Questions

How do I remove bullets from ul in CSS?

Use: ul { list-style: none; }

Why is list-style none not working?

Make sure you apply it to the correct ul/ol, and that a stronger selector is not overriding it.

How do I build a navbar using ul li in CSS?

Reset the list first, then use display: flex on the ul to align items horizontally.

Do I need to reset margin and padding along with list-style none?

Yes, most of the time, because browsers add default spacing.

What is the best way to style list links after removing bullets?

Add text-decoration: none and include :hover/:active styles for clarity.