title: why looks my margin different in chrome as in all other browsers
body: <p>i have here a problem that i never seen before. i build a header with an menu icon on the left side and three icons on the right side of it. Two of the three icons on the right side, have badges. The problem is that the badges are looking perfect on safari, firefox, edge etc. but on chrome are they to much left.   if i change now the margin from <code>margin: 0 0 0 -8px</code> to <code>margin: 0 0 0 11px</code> is it looking good on chrome, but in all other browser is it to much right. How can it be that a margin looks different? Never seen it before.</p>
  
  <pre><code>.pulse-badge {
  background: rgba(51,51,51, 0.87); ;
  border-radius: 50%;
  min-height: 1.3rem;
  margin: 0 0 0 -8px;
  position: absolute;
  min-width: 1.3rem;
  top: 0.8em;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51,51,51, .051);
  transform: translate3d(0, 0, 0);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);}
  
  @keyframes pulse {
      to {
      box-shadow: 0 0 0 12px transparent, 0 0 0 16px rgba(90, 153, 212, 0);
      }
  }
  </code></pre>
  
  <p>thats the css of the badges and im using skeleton as framework. I also have here a <a href="https://jsfiddle.net/zer00ne/febg4cuo/1/" rel="nofollow noreferrer">jsfiddle</a> where ya can see it, if ya change the margin.  and here is a link with the live project if ya whant to see it with the other content if it helps <a href="http://kallax.awesom-media.de/blank.html" rel="nofollow noreferrer">live</a></p>
  
  <p><a href="https://i.stack.imgur.com/0qH4Q.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0qH4Q.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/o0WJx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o0WJx.jpg" alt="chrome"></a></p>