Full width semi-transparent header not full width on responsive.

I have recently had some amazing help to create some custom adjustments to the theme which have pretty much worked great, subject to a few remaining tweaks in other posts. However I still have an issue with the responsive version of the custom full width semi-transparent header with menu above. It only has the colour block across the middle of the page and not right to the edges as we want.

Can anyone help please?

Below is a copy of my custom css and also a screenshot from my iphone6 showing what I mean at the top.

####

#footer .container {
width:100% !important;
max-width:100% !important;
padding:50px !important;
}

#fullwidthsection .container {
width: 90% !important;
max-width: none !important;
}
.logo img {
top: 10px !important;
}

.widgettitle { font-size: 20px!important; }

div .copyright {
width: auto!important;
}

.av-image-caption-overlay-center p{
margin-top:100px !important;;
}

.avia-button {
font-size: 25px!important;
}

.av-section-bottom-logo.header_color .container {
background-color: rgba(255,255,255,0.5) !important; }
.av-section-bottom-logo.header_color + div + .avia-section {
margin-top: -135px;
}

.av-section-bottom-logo.header_color .container, .av-section-bottom-logo.header_color .container .inner-container {
width: 100% !important;
max-width: 100%;
}
.avia-button.avia-size-large {
border-radius: 100px;
}
@media only screen and (max-width: 767px) {
.responsive .logo a {
display: inline-block;
vertical-align: middle;
}

.responsive .logo {
position: relative;
display: block;
width: 100%;
text-align: center;
}

.logo img { max-height: 48px; }
@media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
max-width: 80%;
height: auto !important;
margin-bottom: 10px;
}}

.responsive .toggle_icon {
width: 15px !important;
}