How to Create a Navigation Bar with Equal-width Navigation Links

A navigation bar is an essential component of any website, as it helps users to navigate the site easily and quickly.

In this tutorial, we’ll go through the steps of creating a navigation bar with equal-width navigation links using HTML and CSS.

Step 1: HTML Markup

The first step is to create the HTML markup for the navigation bar. Here is the code for a basic navigation bar:

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Step 2: Styling with CSS

The next step is to style the navigation bar with CSS. Here is the code to create equal-width navigation links:

header {
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
}

nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}

nav li {
flex: 1;
text-align: center;
}

nav a {
color: #fff;
display: block;
padding: 1rem;
text-decoration: none;
}

Explanation of Code

The header element has a background color of #333 and a color of #fff. The display property is set to flex, and the justify-content property is set to center.
The unordered list inside the navigation element has its display property set to flex, and the list-style and margin properties are set to none. The width property is set to 100%.
The list item elements have their flex property set to 1 and their text-align property set to center.
The anchor elements inside the list items have a color of #fff, a display property set to block, and a padding of 1rem. The text-decoration property is set to none.