Right-align menu button

Hi!

I’m losing my hair over this very silly issue that seems to not be easy at all.

Adding a button the menu is fine, but i’m unable to float it to the right side while having the rest items on the left.
I’ve tried flexbox and the box method, but nothing seems to bite here.

I see the parent UL is using flexbox, so I tried the recommended margin-left: auto; on the last li item, and that doesn’t work either.

What am I missing? I’ve done this so many times but i’m falling flat here.

https://docs.generatepress.com/article/adding-buttons-navigation/

/* == MENU BUTTON .nav-button ======================== */ 
	.main-navigation .main-nav ul li.nav-button {
		margin-left: auto;
	}

    .main-navigation .main-nav ul li.nav-button a {
        line-height: 35px;
        color: var(--contrast);
	border-radius: 5px;
	border-bottom-left-radius: 0px;
	background-color: var(--base-3);
	transition: all 0.2s;
	&:hover {
		background: var(--contrast);
		color: var(--base-3);
	}
    }