Display flex i dziwne polozenie elementow

Question

Witam.

Po dodaniu opcji display:flex; elementy dosc dziwnie sie zachowuja, o co moze chodzic? jak temu zapobiec?

oto zdjecie

http://bit.ly/2hjIyVJ

html:

<div class="wrapper">
    <nav class="navbar">
      <ul>
        <li><a href="#"><img src="barbers.jpg"class="logo"</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
</div>

a oto kod css:

.wrapper {
  width: 100%;
  height: 100px;
  margin:0 auto;
}
nav ul {
  list-style-type: none;
  padding: 0;


}
nav a{
  text-decoration: none;
  display: block;
  padding: 10px;
  color:black;
  text-align: center;
}
nav a:hover {
  text-decoration: none;
  color:red;
}
@media screen and (min-width: 768px) {

  nav ul {
    display: flex;
  }





}

 

Comments

Myślisz, że sam arkusz stylów wystarczy? A gdzie kod HTML? Najlepiej umieść wszystko w serwisie codepen.io.

---

edytowalem juz

Answer 1

<li><a href="#"><img src="barbers.jpg"class="logo"</a></li>

Nie zamknąłeś img

Comments

Ach… uprzedził mnie 

---

Kurcze, wybacz

---

Wybaczam 

---

Ufff :D