Widening logo area without widening container

Hi,

I currently have my logo sitting at the top of the app and would like the white background area to stretch further out (ideally full width) to get rid of the orange bars. I previous put css in to put the container at 100%, but this stretches my content underneath out to full page and looks silly for those on larger screens. It also left a little orange, but didn't look too bad (see images below). I don't see how I can override anything else in CSS, but if anyone knows how to do it, I'd appreciate it please.

Current CSS(in both versions below): 

#knack-logo {
  background: none !important;
  background-color:#ffffff !important;
  text-align:center !important;
    min-width:100%;
}
 
Previously has this included too:
.kn-container{
  max-width:100% !important;
}
Image with container at 100% (including container code above):

Now the header without the container CSS code:

Many thanks,

Susanne.