title: font size and margin differences between Safari and Chrome
body: <p>I am noticing some differences when viewing my website in different browsers.</p>
  
  <p>this is Safari : </p>
  
  <p><img src="https://i.stack.imgur.com/EqP5F.png" alt="enter image description here"></p>
  
  <p>And this is Chrome : </p>
  
  <p><img src="https://i.stack.imgur.com/8vNEj.png" alt="enter image description here"></p>
  
  <p>Why are there differences in font size and margins? 
  I have tried pixels instead of em but didn't work</p>
  
  <p>css code : </p>
  
  <pre><code>* {
  margin: 0;
  padding: 0;
  }
  
  .image {
      width : 100%;
  }
  
  #container {
      position :relative;
      font-size: 100%;
  }
  .signup, .signin {
  cursor:pointer;
  width :15%;
  height:7%;
  background: #EB6553;
  border: 1px solid #979797;
  border-radius: 5px;
  /* Sign up : */
  font-family: AmericanTypewriter;
  font-size: 3em;
  color: #000000;
  }
  
  .signup {
      position:absolute;
      top :58.5%;
      left: 30%
  }
  
  .signin {
      position:absolute;
      top : 58.5%;
      right: 30%;
  }
  
  .facebook {
  position:absolute;
  top: 86%;
  left:40%;
  cursor:pointer;
  width: 22%;
  height:5.5%;
  background: #415E9B;
  border: 1px solid #979797;
  border-radius: 5px;
  /* Sign in with faceboo: */
  font-family: AmericanTypewriter;
  font-size: 2em;
  color: #FFFFFF;
  }
  </code></pre>
  
  <p>html : </p>
  
  <pre><code>&lt;div id='container'&gt;
      &lt;%= image_tag('Group.jpg', class: 'image') %&gt; &lt;br/&gt;
  
      &lt;div id='buttons'&gt;
          &lt;%= button_to "Sign up",  new_user_registration_path, :method =&gt; :get, class: 'signup'%&gt;&lt;br/&gt;
          &lt;%= button_to "Sign in with facebook", user_omniauth_authorize_path(:facebook), class: 'facebook' %&gt;&lt;br/&gt;
          &lt;%= button_to "Log in",  new_user_session_path, class: 'signin', :method =&gt; :get %&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>