Header difference in IE and Firefox

Hello people,

there is a small difference on my header when viewing it in IE and Firefox. In IE it seems to hang out from the right side a little.

Any ideas?

Also since I have width 75% in mainwrapper, how can I do the same with my logo so it doesn't mess up when viewed on smaller screens?

https://www.bionaturaldrops.com

Thanks in advance!

Your image "bionaturaldropsbanner.jpg" is 948px wide and you have your site set to be 75% or when looking with a res of 1024X768 = 768px - - less width than your image....

What I would do with this is to drag out your image editor program and separate the left most part & actually only the logo part and create this as an individual file named logo.gif or jpg. By default, this will be floated left and only about 300px or thereabouts.

Then create your left image with the gradient to the left as another image and make it as wide as you think there are browser resolutions. Apply it through the css to #logoWrapper as a background image and fix the position to be on the right.
Excess will not appear when a background image to the left but will auto crop to the container.

Optionally, you could have 3 images one logo to the left the other to the right and a gradient tile that repeats only vertically applied as the background image. It would be on the order of 5-10 px high and 2500px wide and fixed to the right