Black margin above header

Hi guys
I have just noticed that somehow a black strip/margin has appeared above my header on the following website

http://27.121.64.167/~sufjpwue/

I am not sure what may be causing this, but the blue header should go all the way to the top. I am not sure if any of the following CSS may be influencing it. Your help would be greatly appreciated:

.header_color .main_menu ul {
background: transparent;
}

#top .main_menu .menu>li:last-child>a {
padding-right: 10px;
}

h1, h2, h3, h4, h5, h6{
text-transform: none !important;
}

.page-id-223 .avia_textblock, .page-id-48 .avia_textblock, .page-id-50 .avia_textblock, .page-id-52 .avia_textblock, .page-id-12 .avia_textblock, .page-id-14 .avia_textblock {
max-width: 560px !important;
}

.main_menu a {
font-weight: 500!important;
font-size: 110%!important;
}

body {
font-size: 14px;
font-family: Arial !important;
}

span.image-overlay {
display: none !important;
}

h1, h2, h3, h4, h5, h6 {
font-family: Arial !important;
}

Thanks heaps
Ivana