How to stop Navigation bar list from changing position? - html

Question

i created a navigation bar, and while hovering i made the font larger.
but when i hover the other menu items seem to move from its position , how do i lock them in their position. Also, just started html and css, if anyone would help me, thank you :)
html:
<div class="header">
<div class="container">
<div class="header-left">
<a href="index.php">
<img src="images/hawa.png" style="width:200px;height:60px;">
</a></div>
<div class="header-right">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
<li>Sign Up</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
CSS:
.header{
background-color: #003399;
width: 100%;
height: 83px;
position: fixed;
}
.container{
width:1200px;
background-color:#003399;
margin:auto;
height:83px;
}
.header-left{
float:left;
padding: 10px;
}
.header-right{
float:right;
width:900px;
height:83px;
}
.header-right ul{
margin: 0;
padding: 0;
}
.header-right li{
list-style: none;
}
.header-right li a{
text-decoration: none;
float:left;
display: block;
padding: 35px;
color:#FFFFFF;
text-transform: uppercase;
font-size: 18px;
font-family: sans-serif;
}
.header-right li a:hover{
font-size: 20px;
display: block;
}

Answer 1

You can add a class on your list items and set the width for these items. For example:
html:
<ul>
<li class="nav-cells">Home</li>
<li class="nav-cells">About</li>
<li class="nav-cells">Services</li>
<li class="nav-cells">Contact Us</li>
<li class="nav-cells">Sign Up</li>
</ul>
css:
.nav-cells {
width: 100px;
display: inline;
}