How to add banner swf in left side of logo without cutting or broke ?

How to add banner swf in left side of logo without cutting or broke ?

I have banner swf i need to add on left side of logo

my design contain to menu - logo and banner

before i put banner design logo full display without cutting

but after adding banner my design corrupt and banner cutting

Html code

<divclass="container">
<ul>
<li><ahref="#home">????????</a></li>
<li><ahref="#news">???? ??</a><i>|</i></li>
<li><ahref="#contact">???? ???</a><i>|</i></li>
<li><ahref="#contact">?????</a><i>|</i></li>
<li><ahref="#contact"> ????? ????</a><i>|</i></li>
</ul>
<divclass="w3ls_header_middle">
<divclass="container">
<divclass="agileits_logo">
<imgsrcimgsrc="../../images/logo.png">
</div>
<divclass="agileits_logo"></div>
</div>
<!-- after banner added -->
<div>
<embedsrcembedsrc="../../images/banner.swf"type="application/x-shockwave-flash" width="624"height="104" />
</div>
</div
</div>

Code (markup):

css code

body {margin:0}
ul {
border-top: 2pxsolidred;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
height:5%;
padding: 1px;
}
li {
float: right;
}
li a {
color: white;
padding: 16px;
text-decoration: none;
}
li i{
color:white;
}
.w3ls_header_middle {
padding: 0 0;
/*padding-top:30px*/
}
.agileits_logo{
float:right;
margin-right:0em;
margin-top:1em;
}
/*---after banner added---*/
.agileits_banner {
float:left;
margin-left:0em;
margin-top:1em;
}

Code (markup):

image problem found in link below :

http://www.mediafire.com/view/2722ziygd2x46vj/changes.jpg

so that

How to add banner swf in left side of logo without cutting or broke ?