Crazy thing happening with Menus & CSS Classes

I am making changes into my website’s (not uploaded yet) social icons which are in menu bar. I placed twitter before and facebook after in custom menu. and coded both to float on right. Apparently facebook is showing before twitter in menu bar when loading page.
And when I am placing facebook before twitter in custom menu than twitter is showing before facebook.

The only clue I draw from this is that due to CSS specificity may be codes are applying first to twitter and that is why it is going to rightmost side of menu bar.

Is my assumption is right or wrong? Or may be I am doing something wrong?

I am using Twenty Twelve theme.

In another post WPyogi mentioned:

The tabs make no difference at all. The left and right are invalid CSS code in that context.

Can someone explain me this? I am putting codes like:

float: right;
right: 0;
left: auto;

By this code (right: 0;) I want to tell browser to keep no space on right. I known, I have written ‘float: right;’ but I want to make it comprehensive i.e. if I ever want to make some space on right (or left) I can easily do that.

Thanks!