Shrinking of site header

My goal is to have decreasing padding of site header (like in Home Page) on all pages.
When I inspect the CSS I see that:

.site-header.float-header {
padding: 5px;

is overwritten inline by:

.site-header.float-header {
 padding: 20px 0;

How to prevent this?

Hello there,

Please try adding the below CSS code into your site’s additional CSS option (Appearance > Customize > Additional CSS).

.site-header.float-header {
  padding: 5px !important;

That way tells the browser to only read the rule marked with !important.


Thank you for this tip, but could you tell me what causes this overwrite?