How To Add Banner On Left Side Of Logo Without Cutting

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

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

css code

body {margin:0}
ul {
border-top: 2px solid red;
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;
}

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 ?