How to put logo in the center without changing layout or width of navigation bar

                 <img  class= "logo" src="">
         	<li><a href="#">Home</a></li>
         	<li><a  href="#" class="active">Learn More</a></li>
         	<li><a href="#">Discount Coupon</a></li>


     width: 100px;
     margin-left: 500px;
     display: block;
     margin: auto;
     background-color: #0072bbff;


	background-color: #0072bbff;


I have my logo centered but its above the the listed items and i’m not trying to use space between I want to the listed items before the logo and the logo in centered while keep the navigation bar at a certain size without the logo causing the navigation bar to expand

Since, you have defined display: block; your image is gonna take full width space.