Is there a way to align Brand slightly to the right, while also positioning About Portfolio and Contact on the right side with some space between them without relying on margin and padding? A sample of what I'm referring to can be seen here:
<div class="navbar">
<ul>
<li id="brand"><a href="#">Brand</a></li>
<li id="about"><a href="#">About</a></li>
<li id="portfolio"><a href="#">Portfolio</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
</div>
*{
margin:0;
padding:0;
}
.navbar{
top:0;
position:fixed;
width:100%;
background-color:rgb(114, 40, 114);
}
ul{
list-style:none;
display:flex;
flex-flow: row nowrap;
background-color:rgb(114, 40, 114);
height:80px;
justify-content:space-between;
align-items:center;
}
ul #brand{
text-align:center;
}
ul #about{
}
ul #portfolio{
}
ul #contact{
}
ul li a:hover,
ul li a:focus{
text-decoration:none;
color:white;
}