Logo Image And Menu Interact And No Space Between Logo And Menu

<div class="container">
        <ul>
            <li><a href="#home">الرئيسيه</a></li>
            <li><a href="#news">نبذه عن</a><i></i></li>
            <li><a href="#contact">اتصل بنا</a></li>
            <li><a href="#contact2">اللغه</a></li>
            <li><a href="#contact3"> تسجيل دخول</a></li>
        </ul>
        <div class="w3ls_header_middle">
            <div class="container">
                <div class="agileits_logo">
                    <img src="../../images/logo.png" class="img-responsive">
                </div>
                <div class="agileits_logo"></div>
                </div>
 
            </div>
 
        </div>
 
            <div class="container body-content">
                @RenderBody()
                <hr />
                <footer>
                    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
                </footer>
            </div>
 
 
            @Scripts.Render("~/bundles/jquery")
            @Scripts.Render("~/bundles/bootstrap")
            @RenderSection("scripts", required: false)
 
 
css
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:6%;
 }
li {
    float: right;
    width: 110px;
 
}
li a {
    display: block;
    color: white;
    padding: 4px;
    text-decoration: none;
}
li a:after {
  content: " ";
  background-color: #666;
  margin-left: 30px;
  display: inline-block;
  width: 2px;
  height: 20px;
  transform: translateY(20%);
}
li:first-child a:after {
  background-color: #333;
  margin-left: 0;
}
.w3ls_header_middle {
    padding: 0 0;
 
}
.agileits_logo{
	float:right;
	margin-right:0em;
    height:5%;
 
 
}