remove white border around div

I'm trying to create a page that detects if a mobile device is in portrait mode. The function seems to be working fine, but there is a problem with the layout.
I always get a white border around my div tags, but can't seem to figure out where it comes from. I checked the developer tools and found nothing. Setting the border to 0 doesn't work either. Try it with overflow: hidden, nada.

http://jsfiddle.net/6c4e00x0/4/

HTML

<div id="modal">
    <div>
        <div id="icon">
            <img id="rotate" />
        </div>

        <div id="msg"> 
            <a id="close" href="#">close</a>
        </div>
    </div>
</div>

CSS

#rotate {
    width:100%;
    height:300px;
    background:url("http://m.campolympia.com/assets/mobile/site-images/icon-horizontal.png") center center no-repeat;
}

#msg{
    position:relative;
    width:100%;
    text-align:center;
}

a {
    color:white;
}