Lists as Navigation

Commonly use nav and ul, with ul being the flex container.

Example 4.10 - Example 4.10
 
 <nav>
   <ul>
     <li>
       <a href="#">Planet       </a>
     </li>
     <li>
       <a href="#">Solar System       </a>
     </li>
     <li>
       <a href="#">Galaxy       </a>
     </li>
     <li>
       <a href="#">Universe       </a>
     </li>   </ul> </nav>

In head element: 

<link rel="stylesheet" href="example10.css"/>

In example10.css

nav ul { display: flex; }
nav ul { list-style: none;
}
nav ul li { margin-left: 1em; }