Hamburger Menu with React JS - css

Question

Hello I am trying to make a hamburger menu bar. But I can't seem to position the circle right icon to the right. When I try to add a padding-right it won't let me.
My JS:
{
SidebarData.map((item, index) => {
return (
<div >
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
<span className={"roundright"}>
<PageRight />
</span>
</Link>
</li>
</div>
);
})
}
My CSS:
.nav-text {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 16px 8px 16px;
list-style: none;
height: 50px;
text-align: center;
}
.nav-text a {
text-decoration: none;
color: #FFFFFF;
border: 1px solid white;
font-size: 14px;
width: 90%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
.roundright {
font-size: 14px;
color: #E7135D;
font-size: 14px;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
Here is what I currently have:
Desired result:
Here is my CSS:

Answer 1

I would recommend using a flexbox and the justify-content for this case. You can view more on the space-between property here. Note that my answer only contains new classes and not your previously written classes.
Example HTML:
<div >
<Link to={item.path}>
<li key={index} className={`${item.cName} item-container`}>
{item.icon}
<span>{item.title}</span>
<span className={"roundright"}>
<PageRight />
</span>
</li>
</Link>
</div>
Example CSS:
.item-container {
display: flex;
justify-content: space-between;
align-items: center;
}