[Theme: Hero] Social media link in menu

I’m trying to place a small Facebook social media link to the far right of my menu using these instructions: http://nathaningram.com/tutorials/easy-social-icons-in-the-wordpress-navigation-menu/

Here is the snippet of code I’m using:

.menu-facebook {
    text-indent: -9999px;
    background-image: url(http://localhost/wordpress/wp-content/uploads/2013/05/facebook-link.jpg) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important;
    width: 50px;

Unfortunately it isn’t floating to the far right and is appearing below the menu (see screenshot for example).

http://i43.tinypic.com/311ti13.jpg

Any ideas on what I need to change in my code to make it work with Hero theme?