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

[ahmedsa]

I have image logo and menu interact with each others

so that this is problem because logo not display clearly

i need to display full logo image

in my case not full logo image display

so that i need to display full logo image with another meaning

leave space between menu and logo image

my fiddle as below

fddle problem

i need to modify fiddle to leave space between logo image and menu

my code

<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%;

	
}

[John_Betong]

@ahmedsa

ul {position: fixed;}

Your menu overrides the normal flow of Html statements, is fixed and will not scroll.

Your logo starts at the top of the page and will scroll.

Applying margin-top: 123px; will force the logo to render below the menu.

Adjust the pixels to suit.