Invisible padding in header when using scroll function on start-page

Hi,

I am setting up a new version of my companies web-page in Enfold on a staging server. I was helped by one of your support specialists to make the header/menu smaller but when I scroll (using the menu to scroll down the page) there is a “padding” or “space” that shows the bottom of the image (color section) I have put between the color-section items. I would of course love for the page to show the colorsection with the header/text only.

This is the css I use for the header:

`#header_main
{background-color: #e6e3db !important;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
height: 88px !important;
border: none !important;
}
.avia-menu-fx
{display:none !important;}

.html_header_top.html_header_topbar_active.html_header_sticky.html_large #top #main {
padding-top: 100px;
}

#top .grid-entry {
border: 3px solid transparent;
}

How may I remove this padding?

Thanks:)

Elise