The logo on my friends website is working properly in all browsers yet when I open up my iPhone or iPad (actual devices) it's all wonky. 

```
<a href="http://www.averylawoffice.ca/averywordpress"><img class="averylogo" src="<?php bloginfo('template_directory') ?>/img/HEADER-AveryLawOffice-LOGO.png" alt="Avery Law Office"></a>

```

It's not placed in any containing div. Just on it's own.

CSS

```
 .averylogo { position: absolute; width:360px; left: 50%; margin-left: -180px; z-index: 2; }

```

I'm not quite sure why it works everywhere else but doesn't center on my iPad or iPhone properly. 

This is what it's looking like, but only on the iOS.
![enter image description here](https://i.stack.imgur.com/EHIWn.png)

What am I doing wrong?