Header resize problems

I changed the small fixed header so it does not shrink when I scroll down the page using this quick CSS:

#header_main .container, .main_menu ul:first-child > li > a {
height: 88px!important;
line-height: 88px!important;
}
.logo, .logo a, .logo img { max-height: 88px!important; }

But in doing so, when I click to scroll to a section, the page acts as if the header has shrunk which creates the header to overlay the section.