Remove white space from left & right side of header image

I'm currently in the process of setting up my blog, and I am having difficulty formatting the header in the way I had planned.

Here is my site. As you can see, their is extra space on the sides of the header. My goal would be to remove the space, so that the floral pattern is flush with the content box or whatever you call it.

I've gone through my theme's CSS multiple times, and have changed the margins, widths, and paddings on everything and anything possibly associated with the header image, but have had zero luck. Is their something I'm missing?

My blog is hosted through Wordpress and my parent theme is from the Genesis Framework.

Here is the CSS for the header image:

/*
Site Header
--------------------------------------------- */

.audrie .site-header {
    background-position: center;
    padding:0px 0;
        width:100%;
}

/* Title Area
--------------------------------------------- */

.title-area {
    padding: 0px 0;
    margin-bottom: 30px;
    margin-top: 20px;
}

.title-area h1 {
    margin: 0 auto;
}

.title-area p {
    margin: 0;
}

.header-image .title-area {
    padding: 0;
        width:100%;
}

.site-title,
.site-title a {
    font-size: 64px;
    font-weight: 600;
    letter-spacing: 8px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.site-title a,
.site-title a:hover {
    color: #747474;
}

.site-description {
    color: #808080;
    font-family: Lato;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: .5px;
    margin: 0;
    text-align: center;
    text-transform: none;
}

/* Full width header, no widgets */

.header-full-width .title-area,
.header-full-width .site-title {
    width: 100%;
}

.header-image .site-description,
.header-image .site-title a {
    display: block;
    text-indent: -9999px;
}

/* Logo, hide text */

.header-image .site-header {
    background-position: center !important;
    background-size: 1000px 200px !important;
    padding: 0;
margin-top:-90px;
padding-bottom:30px;
}

.header-image .site-title a {
    float: none;
    min-height: 200px;
    width: 100%;
}

/* Widget Area
--------------------------------------------- */

.site-header .widget-area {
    float: right;
    text-align: right;
    width: 720px;
}

.header-image .site-header .widget-area {
    padding: 0px 0;
}

.site-header .search-form {
    float: right;
    margin-top: 22px;
}

Any help or guidance in the right direction would be greatly appreciated! Thanks!

you could do something like this:

.site-container{
padding: 0
}

.header-image .site-header{
background-size: 1100px 200px !important;
}

.site-inner{
padding: 36px;
}

maybe some !important is needed and check the responsiv-behavior..