Yellow area under header, can't figure out why

Ahoy,

Ahoy,

I have a yellow area under my header. It looks extended… as you can see. How do I get rid of this. I have a lot of css i’ve been playing around with… but can’t figure it out… let me know if you can help!

Here is the code I currently have in my css

/* Logo position*/
@media only screen and (max-width: 767px) {
.responsive .logo img {
    max-height: 90px!important;
}
.header_bg {
    min-height: 120px!important; 
}
.av-logo-container {
    top: -33px!important;
}
.html_header_top.html_logo_center .logo {
    left: 0%!important;
    transform: none!important;
}
.responsive #top .logo {
    margin-left: 0px!important;
}
}

.av-main-nav {  
margin-top:20px!important;
}

.av-main-nav li:nth-child(2) {
    margin-right:320px;
}

.av-logo-container {
position:absolute;
left:0px;
}

.html_header_top.html_bottom_nav_header .main_menu { 
    position: absolute;
    background: transparent!important;
}

#header {
    top: 40px!important;
}

.header_color .header_bg {
    min-height: 100px;
}

.avia-icon-pos-left {
    float: none !important;
}

.header_color .header_bg {
    min-height: 150px;
    top: -50px;
}

.html_header_top.html_logo_center .logo {
top: -30px;
}

.html_header_top.html_header_sticky #header {
position: fixed !important;
}
@media only screen and (max-width: 767px) {
.responsive #main {
padding-top: 82 !important;
}
}

@media only screen and (max-width: 767px) {
.responsive #top .header_bg {
background-color: #EEE5C9;
}}

@media only screen and (max-width: 767px) {
.responsive #top .logo {
margin-left: 100px;
}}

@media only screen and (max-width: 480px) {
.responsive .logo img { max-height: 70%; }
.responsive .logo { margin-left: 0 !important; }
.home #av_section_1 .content {
    padding-top: 180px;
}}

.header_color .header_bg {
    box-shadow: 1px 1px 1px black;
}