I'm using a SVG logo as a background image and I can't seem to get it to align correctly to the left in Internet Explorer *(edit: and Safari)*.

The containers look like so:

```
<div id="header">
    <div id="logo"></div>
</div>

```

With the styles:

```
#header{
    width: 100%;
    max-width: 1200px; 
    height: 100%;}

#logo{
    background: url(../images/ss_logo.svg);
    background-position: left center;
    width: 100%;
    height: 100%;
    float: left;}

```

You can see that the `<div>` should span 100% of its parent but display the logo to the left of the element. This works fine in Chrome and Safari, but the logo is always centered inside the `<div id="logo">` in IE.

Information seems to be really hard to find on this, has anyone else had the same problem?

Here's a link to an [example version of the problem](http://magma.acidic.co.nz/sites/example), the green box is the SVG.