diffrences between local site and server. the html and css the same

Hi
something bizzare and i can't find why it happens.
on my local machine i have the html and css and all looks great. but when i upload it to the server the sname element doesn't look the same.
by the way when i play with firebug on the local site every rule makes a different, but on the server if i uncheck or check some rules it doesn't have any effect.
it is a ul that is created via an ajax call. again html and css are exactly the same. here is the code:

            ul{
                list-style: none;
                display: table;
                margin: 2.5em auto 0;
}
                li{
                    display: table-cell;
                    padding: 0.2em 1.5em;
}
.badge{
    padding: 4px 7px !important;
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
     transition: all 0.2s linear;
     margin-bottom: 1em;
    &:hover{
        border-radius: 0;
        box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.45);
     }
}
.sname{
      margin-right: -35px;
    margin-top: 20px;
    text-align: center;
    word-wrap: break-word;
    width: 100px;
    font-size: 1.2em;
    font-weight: bold;
}

Select allOpen in new window

i am attaching images one from the locale and one from the server. any idea what's going on there?