List Navigation Example

Below is an example of list-based navigation styled by display: flex;

Use the following HTML and CSS fragments to get the basic layout, then customize with colors, padding, etc.

HTML

					
<nav>
        <ul>
           <li><a href="#">Item 1</a></li>
           <li><a href="#">Item 2</a></li>
           <li><a href="#">Item 3</a></li>
           <li><a href="#">Item 4</a></li>
           <li><a href="#">Item 5</a></li>
        </ul>
</nav>

				

CSS (Flex Method - Preferred)

					
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-around;
} 
            
				

CSS (Legacy Float Method)

					
nav {
	overflow: auto;
}
          
nav ul {          
 	list-style-type: none;
	margin: 0;
	padding: 0;
}
          
nav li {          
	float: left;
	width: 20%;
}
         	
				

Note: Set next div after #nav to have clear: both;