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

HTML-CSS
1 
         	<header>
           
        <nav>
         	<ul>
                 <img  class= "logo" src="https://www.logolynx.com/images/logolynx/fc/fc0b437ce037f257e4fff275a0a1025e.png">
                  
         	<li><a href="#">Home</a></li>
         	<li><a  href="#" class="active">Learn More</a></li>
         	<li><a href="#">Discount Coupon</a></li>
         </ul>
         </nav>
     </div>
 </header>

img.logo{

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

}


nav{
	
}
header{
	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

2

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