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