Web Tasarım div sorunu

 
  <style type="text/css"> 
  #container { 
  	width: auto; 
  	height: auto; 
  	margin: auto; 
  	background-color: #FF9; 
  } 
  #nav{ 
  	height: 44px;  
  	width: 1300px; 
  	float: left; 
  	background-color: red; 
  } 
  	  
  .horizontal ul{ 
      margin: 0; 
      padding: 0; 
      background: #2E3A42; 
  	float: left; 
  } 
  .horizontal li{ 
      float: left; 
      background-color: #2E3A42; 
      list-style-type: none; 
      height: auto; 
  } 
  .horizontal li a{ 
  	float: left; 
      display: block; 
      color: white; 
      height: 44px; 
      text-align: center; 
      padding: 0px 16px; 
      text-decoration: none; 
  } 
  .horizontal li a:hover{ 
      background-color: #038C1D; 
  } 
  </style> 
  

 
  <div id="container"> 
  	<div id="nav"> 
  		<ul class="horizontal"> 
      		<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=116085183&url=#" data-href="#">Home</a></li> 
      		<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=116085183&url=#" data-href="#">News</a></li> 
      		<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=116085183&url=#" data-href="#">Contact</a></li> 
      		<li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=116085183&url=#" data-href="#">About</a></li> 
  		</ul> 
  	</div> 
  </div>