Elements loading at a larger size in Chrome

Question

I've got a problem that only comes into play in Chrome. When I first load any page in the site the H1 and nav elements in my navigation bar come in bigger. When inspecting with inspect element I can see that my padding and margin are the same and what they should be but the elements them selves are taller and wider. It's a fully responsive site so when I resize the browser and a @media rule comes into play the elements go back to the size they should be. But if I refresh at an @media size it loads it at the wrong size again.

If anyone knows what could be causing this, I would be very grateful to have some insight.

Note: I've tried line-height: 0; and height: auto; to no avail.

HTML

<header>
<a href="index.html"><h1><span id="logo">Design</span>Basics</h1></a>
<nav id="nav">
<a href="principles.html" id="navp">Principles</a>
<a href="type.html" id="navt">Typography</a>...
</nav>
</header

CSS

* { -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;}

p,html,img,body,div,h1,h2,h3,h4,dd,header,main,section,nav {
  margin: 0;
  padding: 0;}

a {text-decoration: none;}

ol,ul {list-style-type: none;}

html {font-size: 62.5%; min-height: 100%;}
body {height: 100%; background-color: #eee; color: #ffe;}

body, p { font-size: 1.6rem; line-height: 150%; font-family: 'Open Sans',
  'Helvetica Neue', Helvetica, Arial, sans-serif;}

h1, h2, h3, h4, nav a { text-transform: uppercase; font-family: 'Oxygen',
  'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .3rem;}
h1 {font-weight: 700; font-size: 3rem; color: #444;}

header { background: rgba(250,250,250,0.9);
  border-bottom: 1px solid rgba(190,190,190,0.95);
  position:fixed; width: 100%;
  box-shadow: 0px -5px 20px rgba(100,100,100,0.6); }
header h1 {float:left; padding: .8rem 1% .95rem 2%;}
header hr { color: #ddd; size:1px; width:60%; display:none;}
h1 span#logo { font-family: 'Open Sans', 'Helvetica Neue', Helvetica,
  Arial, sans-serif; font-weight: 300; letter-spacing: .7rem;}
nav{ float:right; margin: .9rem 1.5rem .95rem 1rem; font-size: 1.6rem;
  letter-spacing: .2rem; transition: 1s height;}
nav a { color: #bbb; margin: 0 1.5rem; transition: .6s color;
  font-weight: 300; height: auto;}
nav:hover a {color: #ddd;}
a#navp:hover, a#navt:hover, a#navc:hover, a#navr:hover {color: #888;}