Unwanted Horizontal Scroll

<div id="container">
	<div id="header">
	<div class="header_right"></div>
 
		<h1>Put your site name here</h1>
  </div>
	<div id="navigation">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
	</div>
	<div id="content-container1">
		<div id="content-container2">
			<div id='flyout_menu'>
<ul>
   <li><a href='#'><span>Link 1</span></a></li>
   <li><a href='#'><span>Link 2</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>Link 3</span></a></li>
   <li><a href='#'><span>Link 4</span></a></li>
</ul>
</div>
			<div id="content">
				<h2>
					Page heading
				</h2>
				<p>&nbsp;</p>
		  </div>
			<div id="aside">
				<h3>
					Aside heading
				</h3>
				<p>&nbsp;</p>
			</div>
			<div id="footer">
				Copyright © Site name, 20XX
			</div>
		</div>
	</div>
</div>
 
 
 
 
#container
{
	margin: 0 auto;
	width: 100%;
	background: #fff;
}
 
#header
{
	background: #ccc;
	padding: 20px;
	height: 80px;
}
 
.header_right {
	background-color: #00CCCC;
	float: right;
	height: 100px;
	display: inline;
	margin-bottom: 0px;
}
 
#header h1 { margin: 0; }
 
#navigation
{
	float: left;
	width: 100%; 
	background: #333;
}
 
#navigation ul
{
	margin: 0;
	padding: 0;
}
 
#navigation ul li
{
	list-style-type: none;
	display: inline;
}
 
#navigation li a
{
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}
 
#navigation li a:hover { background: #383; }
 
#content-container1
{
	float: left;
	width: 100%;
	background: #fff;
}
 
#content-container2
{
	float: left;
	width: 100%;
}
 
#section-navigation
{
	float: left;
	width: 16%;
	padding: 20px 0;
	margin: 0 2%;
	display: inline;
}
 
#section-navigation ul
{
	margin: 0;
	padding: 0;
}
 
#section-navigation ul li
{
	margin: 0 0 1em;
	padding: 0;
	list-style-type: none;
}
 
#content
{
	float: left;
	width: 56%;
	padding: 20px 0;
	margin: 0 0 0 2%;
}
 
#content h2 { margin: 0; }
 
#aside
{
	float: right;
	width: 16%;
	padding: 20px 0;
	margin: 0 2% 0 0;
	display: inline;
}
 
#aside h3 { margin: 0; }
 
#footer
{
	clear: both;
	background: #ccc;
	text-align: right;
	padding: 20px;
	height: 1%;
}
 
/*Flyout CSS menu */
 
#flyout_menu {
	font-weight: 600;
	width: 200px;
	float: left;
}
 
#flyout_menu ul, li {
  list-style: none;
  margin: 0;
  padding: 0; 
}
 
#flyout_menu ul li.hover,
#flyout_menu ul li:hover { position: relative; z-index: 599; }
 
#flyout_menu ul ul{
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 598;
}
 
#flyout_menu ul li:hover > ul { visibility: visible; }
 
#flyout_menu ul ul { top: 0; left: 100%; }
 
#flyout_menu span, #flyout_menu a {
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none; }
 
#flyout_menu li {
	background-color: #333333;
}
#flyout_menu li:hover, #flyout_menu li.active {
	background-color: #666666;
}
 
#flyout_menu a {
    color: #FFF;
    line-height: 160%;
    padding: 16px 8px 16px 28px;
    width: 164px; }
 
#flyout_menu ul ul li {
	background: #006C6C;
	border-bottom: 1px solid #007171; }
 
#flyout_menu ul ul li:hover {
	background-color: #999999;
}
 
/* end of flyout menu */