title: Different "margin-left" results with same browser in different devices
body: <p>I'm trying to put an image (a hat) above the letter "u" in the word "blablablau".</p>
  
  <p>The result I expect is that:</p>
  
  <p><a href="https://i.stack.imgur.com/229gg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/229gg.jpg" alt="enter image description here"></a></p>
  
  <p>I solved this with this code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img id="img-hat" src="hat.png"&gt;
  &lt;p id="title-bla"&gt;blablablau&lt;/p&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#img-hat {
      transform: rotate(25deg);
      position: absolute; 
      margin-left: 118px; 
      height: 23px; 
      width: 37px
  }
  
  #title-bla {
      margin-bottom: -5px; 
      font-weight: bold; 
      font-size: 170%; 
      margin-top: 2px; 
      font-family: 'Open Sans',sans-serif
  }
  </code></pre>
  
  <p>The problem is that, using the SAME browser (like chrome) in different devices, I get different <code>margin-left</code> results in my <code>img-hat</code>. </p>
  
  <p>Example: in my computer it shows correctly. In my laptop it shows correctly too. But, in another laptop (with same screen resolution), it shows the hat a little bit more to the right, like that:</p>
  
  <p><a href="https://i.stack.imgur.com/KzQv6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KzQv6.jpg" alt="enter image description here"></a></p>
  
  <p>And this behaviour continues in my cellphone and in another computer that I tested.</p>
  
  <p>Why this happens and how can I solve this?</p>