Problem z responsive navbarem

Question

Cześć, mam taki problem z responsive navbarem.
Otóż chcę aby logo w moim navbarze mogło odejść trochę od navbaru mam na myśli coś takiego.

próbowałem z poradnikiem z w3schools jednak nie udało mi się dojść do tego efektu którego chcę dojść.

Mój css wygląda tak: 

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
	background-color: black;	
	text-align: center;
	text-decoration: none;
	height: 80px;
}
li {
    display: inline;
	padding-left: 30px;
	padding-right: 20px;
	padding-top: 20px;
	margin: auto;
	text-align: center;
	text-decoration: none;
	background-color: black;
    font-size: 25px;
}
li a { 
  display: inline;
  text-align: center;
  text-decoration: none;
  color: white;
} 
li a.active {
	color: white;
}
li a:hover:not(.active) {
  color: red;
}
logo.{
	left: 50%;
	overflow:visible;
	transform: translate(-0%);
}

i html odpowiadający za ten navbar

		<ul>
			<li style="float:left;"><a href="#1">1</a></li>
			<li style="float:left;"><a href="#2">2</a></li>
			<li style="float:left;"><a href="#3">3</a></li>		
			<img class="logo" src="logo.png" alt="logo" style="max-width:180px"></img>			
			<li style="float:right;"><a href="#4">4</a></li>
			<li style="float:right"><a href="#5">5</a></li>
			<li style="float:right"><a href="#6" style="#6">6</a></li>		
		</ul>

z góry dzięki za pomoc :D

Answer 1

Jeśli chodzi Ci o taki efekt  https://i.imgur.com/46yCbcj.png
to wszystko działa tylko w 33 linijce css ma być .logo a nie logo.

Comments

lol xD