I've encountered an issue with a horizontal list on my HTML. I want the first 4 elements to be centered in the middle of the screen with equal spacing between them, and then have the last element appear in the top right-hand corner.
<ul id="navigationBarList">
<li><a href="#About">About</a></li>
<li><a href="#Bookings">Bookings</a></li>
<li><a href="#Blog">Blog</a></li>
<li><a href="#Pricing">Pricing</a></li>
<li><a href="#Sign In">Sign In</a></li>
</ul>
Despite trying various solutions, nothing has worked so far. I believe assigning IDs to individual items might be the key, but oddly enough it's not having any effect.
Here is the CSS:
#navigationBarList{
display: inline-block;
margin: 0;
margin-right: 10px;
padding: 10px;
background-color: black;
font-size: 25px;
color: red;
width: 100%;
}
#navigationBarList li{
display: inline;
width: 100px;
margin-right: 20px;
}