Unordered list styling

Lesson 10 of 12 in Coddy's Bottom Navigation Bar - HTML/CSS Project course.

Let's remove the unordered list dot's and align the icon's horizontally.

Challenge

Easy

Target unordered list from navigation class .navigation ul:

Set the display to flex.
Set the justify-content to space-around.
Set the list-style to none.

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

All lessons in Bottom Navigation Bar - HTML/CSS Project

1Navigation Bar

Code Set up main-container

Navbar

Unordered list & title

2The Style

Unordered list styling Project lesson

Item list styling

Animation on hover Icon