Modifying css for change to top menu bar

I am trying to modify the CSS to change the size of the Top Bar Menu and its elements –extra elements (telephone info) + social icons.

I initially identified the elements to modify from the Chrome inspector, as I already had the CSS lines to modify.

But I cannot get the changes to be applied correctly from the ‘quick css’ of the Enfold Child Theme Options or from the Apperance> Theme Editor> Enfold Child> style.css

Yet, if I apply them from Appearance> Customize, they are displayed correctly. Although I suspect that this is not the most appropriate modus operandi.

Why does the Child Theme have this behaviour? What is the best way to proceed to change CSS styles?

This is the css code I am using that works in appearance but not in the actual theme css

#header_meta {
min-height: 40px !important;
}
#header_meta .phone-info {
line-height: 40px !important;
font-size: 16px !important;
font-weight: normal;
}

#top .social_bookmarks li a {
line-height: 50px !important;
font-size: 24px !important;
min-height: 50px!important;
}

#socket .social_bookmarks li a {
line-height: 30px !important;
}