Safari renders padding different - html

Question

The Nav looks fine in Chrome and Firefox, but Safari breaks into a new line.
Safari:
Chrome:
CODE PEN: http://codepen.io/patrickhofer/pen/vKEbao
The nav has this CSS:
nav {
float: left;
margin-top: 50px;
margin-left: 0px;
}
nav ul li {
display: inline-block;
list-style: none;
height: 100%;
}
nav ul li h1 {
font-size: 40.5px;
font-weight: 600;
height: 100%;
}
/* PADDING FOR NAV */
.navp {
padding-right: 44.3px;
height: 100%;
}
#reflect h1:hover {
text-decoration: underline;
}
#reflect {
position: relative;
-webkit-box-reflect: below -3px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.1) 0%, transparent 50%, transparent 100%);
}
#reflect:before {
background: -moz-linear-gradient(center top, #FFFFFF, #FFFFFF 30%, rgba(255, 255, 255, 0.9) 65%, rgba(255, 255, 255, 0.7)) repeat scroll 0 0 padding-box, -moz-element(#reflect) no-repeat scroll 0 -127px content-box rgba(0, 0, 0, 0);
content: "";
height: 140px;
left: 0;
position: absolute;
top: 277px;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
width: 360px;
}
HTML:
<nav>
<ul>
<li id="reflect" class="navp txtRot"><h1>HOME</h1></li>
<li id="reflect" class="navp txtOrange"><h1>ANGEBOT</h1></li>
<li id="reflect" class="navp txtGelb"><h1>TEAM</h1></li>
<li id="reflect" class="navp txtGruen"><h1>UMWELT</h1></li>
<li id="reflect" class="txtBlau"><h1>KONTAKT</h1></li>
</ul>
</nav>
I'm using this as simple CSS reset:
* {
margin: 0px;
padding: 0px;
}
Any help much appreciated!

Answer 1

It seems like Safari rounds up the font-size to a whole number. If the sizing is important, you could change the font-size down to 40px and do a scale transform on the parent element.