menu-social not floating right

Apologies if this is the wrong place to ask this.
Have been taking the lynda.com course, and in section 5.6, menu-social gets styled. Everything is working for me except the float-right. Have compared my my-simone version carefully to your finished version of Simone, and I’m stumped.

———————
In header.php I have:
———————
<?php my_simone_social_menu(); ?>

———————
In template-tags.php I have:
———————

function my_simone_social_menu() {
    if ( has_nav_menu( 'social' ) ) {
	wp_nav_menu(
		array(
			'theme_location'  => 'social',
			'container'       => 'div',
			'container_id'    => 'menu-social',
			'container_class' => 'menu-social',
			'menu_id'         => 'menu-social-items',
			'menu_class'      => 'menu-items',
			'depth'           => 1,
			'link_before'     => '<span class="screen-reader-text">',
			'link_after'      => '</span>',
			'fallback_cb'     => '',
		)
	);
    }
}

———————
In style.css I have:
———————

.menu-social ul {
    float: right;
    text-align: center;
    list-style: none;
}

.menu-social ul li {
    position: relative;
    display:  inline-block;
}

.menu-social li a:before {
    display: inline-block;
    padding: 0 5px;
    vertical-align: top;
    font-family: 'Fontawesome';
    font-size: 20px;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    content: '\f0c0';
}
.menu-social li a[href*="facebook.com"]::before { content: '\f09a'; }

.menu-social li a[href*="twitter.com"]::before { content: '\f099'; }

.menu-social li a[href*="dribbble.com"]::before { content: '\f17d'; }

.menu-social li a[href*="plus.google.com"]::before { content: '\f0d5'; }

.menu-social li a[href*="pinterest.com"]::before { content: '\f0d2'; }

.menu-social li a[href*="github.com"]::before { content: '\f09b'; }

.menu-social li a[href*="tumblr.com"]::before { content: '\f173'; }

.menu-social li a[href*="youtube.com"]::before { content: '\f167'; }

.menu-social li a[href*="flickr.com"]::before { content: '\f16e'; }

.menu-social li a[href*="vimeo.com"]::before { content: '\f194'; }

.menu-social li a[href*="instagram.com"]::before { content: '\f16d'; }

.menu-social li a[href*="linkedin.com"]::before { content: '\f0e1'; }

@media screen and (max-width: 600px) {
    #menu-social ul {
	    position: absolute;
        top: 0;
        right: 6rem;
        display: block;
    }

    #menu-social li a {
        padding-left:.5em;
        padding-right: .5em;
    }
}

———————

Oddly, the float right works in @media screen and (max-width: 600px), but not at the larger size. The rest works fine (showing the FontAwesome icons, without the words, etc.

I have spent hours trying to figure it out. Help?

thanks!
Love the class, btw.