[ Item 1 ] [ Item 2 ] [ Item 3 ] [ Item 4 ] [ Item 5 ]

когда использую zoom на браузерах и уменьшая меню становится таким

[ Item 1 ] [ Item 2 ] [ Item 3 ] [ Item 4 ]

[ Item 5 ]

подскажите как сделать что оно оставалось на той же строчке? пробовал даже white-space:nowrap; но не помогло

#sidebar7 {
background: rgb(76,76,76); /* Old browsers */

white-space:nowrap;
background-size: 100%;
height: 2.8em;
line-height: 2.8em;
width: 100%;
min-width:100%;

border-radius: 5px;

box-shadow: 0 2px 8px rgba(0, 0, 0, .7);


padding:0 0 0 0;}

<div id="sidebar7">

<style type="text/css">
#sidebar1 h3 a {
	font-family: "Georgia", cursive;
}
.twoColFixLtHdr #sidebar1 
p.sansserif
{
font-family: Georgia,sans-serif;
}


.menuclass:hover
{
text-decoration: none;
background: rgb(76,76,76); /* Old browsers */


border-radius:5px;
height: 100%;

}

.menuclass
{

text-decoration: none;
color: #ffffff;

padding-left:18px;
padding-right:18px;
margin:0;
font-size:12px;
float:left;
white-space:nowrap;
}

</style>

<center>




    <a href="index.php" style="text-decoration:none"><div class="menuclass">Home</div></a>
	<a href="comics" style="text-decoration:none"><div class="menuclass">Comic Books</div></a>
	<a href="news2013" style="text-decoration:none"><div class="menuclass">News Block</div></a>
    <a href="guest" style="text-decoration:none"><div class="menuclass">GuestBook</div></a>
    
	<a href="author" style="text-decoration:none"><div class="menuclass">Author Arts</div></a>
	
	<a href="about" style="text-decoration:none"><div class="menuclass">About us</div></a>
	<a href="gift" style="text-decoration:none"><div class="menuclass">Gift Store</div></a>
	<a href="club" style="text-decoration:none"><div class="menuclass">Dolphin Club</div></a>
	<a href="wishes" style="text-decoration:none"><div class="menuclass">Inter. Wishes</div></a>
	<a href="search" style="text-decoration:none"><div class="menuclass">Search   </div></a>
	



	
	
</center>
    
    
	
    <!-- end #sidebar7 --></div>