Remove white space from the sides of header background image

HI. thanks for the code. I put it in. The interesting thing is that when I look at the site in the customize section of wordpress the white is all gone.

When I look at the site on Chrome the white is gone from the left but not the right.

When I look at it in safari or firefox it doesn’t look any different.

I cleared cache and still the same results.

Thoughts?

nope, same thing. Although now Safari and Firefox have joined the party. 3 sides are up against the background with just white on the right. could it be a size of the image issue?

nope. but I noticed something interesting. When I shrink the page the white space goes away. once the white space is gone if I shrink it more the header contracts with the page. It’s almost like the header doesn’t expand enough? Do I just need to make a bigger header?

did not work. I decided to try a bigger image for the header. The interesting thing is that solved the issue for chrome. but not for FF or Safari.

Here is my custom CSS as it stands right now:

#header-content {
line-height: 0;
margin: 0 3%;
padding: 0em 0;
}
#branding #site-logo img {
margin: 0;
padding: 0;
}
html,body {
margin:0;
padding:0;
}
#metaslider_32 {
float: left;
margin: 0 18px 18px 0;
}
#header-content {
margin: 0 !important;
}
.content-onecolumn #page {
max-width: 80%;
max-width: 1000px;
}
Try this.
#page {
background: transparent;
}
#branding #access{
background: #0000E0;
}