如何在调整浏览器大小时防止右浮动元素掉落

Question

请查看以下代码段。标题内有徽标和导航栏（右侧浮动）。当我横向调整浏览器的大小，经过一定宽度后，导航栏就会关闭，我不希望它发生。如何防止导航栏下降？请帮忙

＆＃13;

＆＃13;

#header
{
	height:150px;
	width:100%;
	background-color:#ff0000;
}
#header #logo
{
	position:relative;
	margin:0;
	top: 50%;
	transform: translateY(-50%);
	margin-left:5%;
}
#header #navbar
{
	list-style:none;
	position:relative;
	display:inline-block;
	float:right;
	top: 50%;
	transform: translateY(-50%);
	margin-right:5%;

}
#header #navbar li
{
	display:table-cell;
	padding-left:20px;
}
#header form
{
	display:inline;
	margin-right:0px;
}
#navbar a
{
	text-decoration:none;
	font-size:20px;
	color:white;
}
#searchbox
{
	height:18px;
	margin-bottom:1.5px;
	width:200px;
}
#submit_button
{
	height:25px;
}

＆＃13;

<div id="header">
	<a href="index.html">
		<img id="logo" src=logo.png alt="logo"/>
	</a>
	<ul id="navbar">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contents</a></li>
		<li><a href="#">Contact Us</a></li>
		<li id="form">
			<form action="">
				<input id="searchbox" type="text" name="Serching" placeholder="Search"/>
				<input id="submit_button" type="submit" value="Go"/>
			</form>
		</li>
	</ul>
</div>

＆＃13;

＆＃13;

＆＃13;