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.

Regards,
Kharis

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