Whenever I zoom in on the header of my website, the line underneath it starts to shrink. Is there a way to prevent this from happening?
Here is the HTML Code:
<div id="main_header">
<div id="main_header_wrapper">
<a href="index.php"><img src="http://chattrd.com/maint/images/logo.png" alt="Chattrd"/></a>
<nav id="navigation">
<a href="index.php" class="nav_icon">Home</a>
<a href="#" class="nav_icon">Blog</a>
<a href="login.php" class="nav_icon">Login</a>
<a href="#" class="nav_icon">Sign up</a>
</nav>
</div;
</div;
And here is the CSS Code:
body {
padding: 0;
margin: 0;
}
#main_header{
background:#FFF;
padding:10px 0;
margin:auto;
border-bottom:1px solid #c5c5c5;}
#main_header_wrapper{
width:900px;
margin:auto;}
nav#navigation{
font-family: Arial;
padding-top: 2px;
text-align: right;
font-weight: bold;
float: right;
display: inline;}
a.nav_icon{
color:#000;
-webkit-transition:background 0.2s ease-in;
-moz-transition:background 0.2s ease-in;
-o-transition:background 0.2s ease-in;
transition:background 0.2s ease-in;
padding: 14px 25px;
text-decoration: none;}
a.nav_icon:hover{
background: #990033;
color: #FFF;}