Arrange Items

Part of the Styling with CSS section of Coddy's HTML journey — lesson 73 of 76.

Challenge

Easy

Let's practice flexbox to create a simple horizontal navigation bar. Use CSS to style the menu to match the design in the image below.

Follow the steps below:

Set the navigation bar as a flex container.
Add spacing between the links.
1. Use justify-content: space-around to distribute the links evenly.
Style the navigation bar.
1. Set the background color to dark blue.
2. Add some padding to create some space around the links.
Style the navigation links.
1. Select the <a> elements.
2. Set the text color to white.
3. Remove the default underline.
4. Set the font size to 18px.
5. Add 8px 15px padding for better spacing.

Try it yourself

<html>
    <head>
        <title>Arrange Items</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="navbar">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Contact</a>
        </nav>
    </body>
</html>