css Problema css chrome x IE

[Filipe Dognani 0]

A minha área nem é CSS, aprendi esses dias o básico e estou apenas quebrando um galho aqui.

O meu problema é com o margin-left de um botão, no Chrome ele fica na posição correta mas quando entro pelo Internet Explorer ele recua para esquerda alguns pixels:

No Google Chrome:

No Internet Explorer:

O botão no XHTML:

<div class="titulo">Você está no</div>
<h:panelGroup rendered="#{MBTemplate.indexAtual == '/index_publico.xhtml'}">
<div class="card-container"
onclick="location.reload();
location.href = 'index_privado.xhtml'"
onmouseover="javascript: rotacionarIconeDireita();"
onmouseout="javascript: rotacionarIconeEsquerda();">
<div class="card">
<div class="side">Setor Público</div>
<div class="side back">Ir ao Setor Privado</div>
</div>
<img src="assets/img/mudar_setor.gif" class="icone" id="icone" />
</div>
</h:panelGroup>
<h:panelGroup rendered="#{MBTemplate.indexAtual == '/index_privado.xhtml'}">
<div class="card-container"
onclick="location.reload();
location.href = 'index_publico.xhtml'"
onmouseover="javascript: rotacionarIconeDireita();"
onmouseout="javascript: rotacionarIconeEsquerda();">
<div class="card">
<div class="side">Setor Privado</div>
<div class="side back">Ir ao Setor Público</div>
</div>
<img src="assets/img/mudar_setor.gif" class="icone" id="icone" />
</div>
</h:panelGroup>

CSS:

.titulo {
margin-top: 10px;
margin-left: 61px;
width: 100px;
}

.icone {
margin-left: 107px;
margin-top: 3px;
position: absolute;
margin-top: 3px;
}

.card-container {
cursor: pointer;
height: 50px;
perspective: 600;
position: relative;
width: 200px;
margin-top: 5px;
margin-left: 5px;
}

.card {
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
width: 100%;
}

.card:hover {
transform: rotateY(180deg);
}

.card .side {
backface-visibility: hidden;
border-radius: 6px;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
background: #eaeaed;
color: #0087cc;
line-height: 50px;
text-align: center;
}

.card .back {
background: #eaeaed;
color: #0087cc;
line-height: 50px;
text-align: center;
transform: rotateY(180deg);
}