Currently, the menu has been created with the following CSS:
nav{
width:1024px;
margin: 0 auto;
}
ul{
display: flex;
justify-content: space-between;
}
li {
border-right: 1.1px solid #333333;
margin: 0 auto;
padding: 0 1em;
text-align: center;
flex-grow: 1;
flex-basis: initial;
text-align: center;
}
The corresponding HTML is:
<nav id="menu">
<ul>
<li>Home</li>
<li>Training & Support</li>
<li>Templates & Forms</li>
<li>Policy Documents</li>
<li>Payment Administration</li>
<li>Tax Compliance</li>
<li>News</li>
</ul>
</nav>
The current result looks like this: https://i.sstatic.net/9wM8E.png
However, the desired layout is shown in the image below where the first and last child elements are aligned at the start and end of the ul container.
https://i.sstatic.net/dOYVW.png
What steps should be taken to achieve this layout?