[CLOSED] Changes in overriding css styles 2.x to 4.x

[rmelancon]

Since upgrading from 2.x to 4.x many of our css style overrides are not really working. Spacing is off, fonts are not the same, padding is gone. This is an example override that looked fine in 2.x and in 4.x looks completely different.

        a.MainMenuBtn span.x-btn-inner,
        .x-btn-inner-default-toolbar-small {
            color: #15428b;
            font-family: "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
            font-size: 1.1em;
            font-weight: bold;
            margin: 0;
            height: 25px;
            padding-left: 16px;
        }

The padding is gone and when I inspect the rendered html, it looks like it is applied but something else is taking precedence and overriding or being applied? I can't really tell. In 2.x if you look at the attached image (from inspect element) the second ".x-btn-inner-default-toolbar-small" is not there. That seems to be what it's using at least the font part.

Can someone point me to what changed in this regard and what is the proper way to override elements in 4.x as opposed to 2.x

Thanks.