Individual nav item color not stretching to 100% width on Mobile

Hello! I have a small issue I'm hoping you can help me with. I have a menu item with the class "menu-item-float-right" as well as another custom class to change the background color, "menu-facebook"

It looks fine on desktop, but on mobile, the background color does not stretch to fill the entire width of the nav menu. If I remove the "menu-item-float-right" class, it works fine on mobile, but of course no longer floats the item right.

Here is the relevant CSS:

.main-navigation .main-nav ul li.menu-facebook a {
    background-color: #4169E1;
    font-size: 2em;
    }
@media (max-width: 768px) {
    .main-navigation .main-nav ul li a {
        text-align: center;
    }
    
    .inside-navigation {
        text-align: center;
    }
}

Is there something simple I am missing? Thanks in advance!