changing banner and header area to a new colour

Site URL: https://iamabbytaylor.com/

Hi there! I'm using York and, on every page of my site, I want the nav bar area and the full banner area below to be one solid colour. I want the rest of the side background to remain white, but the Banner area with and Nav bar to be a dark colour, such as 31191E. Something roughly like the attached. I know I can change the whole site background colour but that's not what I want as I want the actual body of the web page to remain with a white background.

If someone can help that's be amazing thanks so much!

Add to Home > Design > Custom CSS

header#header {
    background: #31191E;
}
.page-text-wrapper.clearfix {
    background: #31191e;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 5vw;
}

@tuanphan great stuff! Only problem is my header stays white on the mobile version of the site. Is there a mobile specific line of code I can add that will make the mobile version of the site match? I need my logo and menu to sit on the dark background on mobile too. 

Thank you!!

1 minute ago, abbytaylor said:

@tuanphan great stuff! Only problem is my header stays white on the mobile version of the site. Is there a mobile specific line of code I can add that will make the mobile version of the site match? I need my logo and menu to sit on the dark background on mobile too. 

Thank you!!

.mobile-bar-wrapper {
    background: red;
}