Why does the First Menu Item (.chosen) jump in Chrome Browser when refreshed? It seems like it's changing the Padding-Right and Padding-Bottom. Please review the code and help me solve this irritating issue. It works fine in Firefox.
<body>
<header>
<div class="con_header">
<h1> SITE NAME</h1>
<nav>
<ul>
<li class="chosen"><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">SERVICES</a></li>
<li><a href="">PORTFOLIO</a></li>
<li><a href="">CONTACTS</a></li>
</ul>
</nav>
</div>
</header>
</body>
header {
background-color: #202628;
height: 80px;
color: #e7e7e7;
font-family: 'Roboto Condensed', sans-serif;
}
.con_header{
width:1170px;
margin: 0 auto;
}
.con_header h1{
float: left;
width:500px;
}
.con_header nav{
float: right;
width:600px;
}
.con_header::after{
content:'';
display:block;
clear: both;
}
.con_header ul{
margin-top:26px;
padding: 0;
}
.con_header li{
display: inline;
}
.con_header li a{
color: #e7e7e7;
text-align: center;
text-decoration: none;
padding: 32.5px 8px;
margin: -4px;
}
.con_header li a:hover{
color: #e7e7e7;
background-color: rgb(232,76,61);
text-align: center;
text-decoration: none;
padding: 32.5px 8px;
margin: -4px;
}
.chosen{
color: #e7e7e7;
background-color: rgb(232,76,61);
text-align: center;
text-decoration: none;
padding: 32.5px 8px;
}