1. Mam problem z menu we flexboxie. Dlaczego boxy nie przyjmują całej wysokości nawigacji i zostaje paskudny margines? Najgorzej jest jak zmniejszymy okno pzeglądarki i menu zrobi się kolumnowe. Próbowałem już wielu rzeczy i nie rozwiązałem problemu.
2. W body użyłem negatywnego marginesu, żeby logo zaczynało się od początku strony. Bez tego z prawej strony zostaje margines. Dlaczego tak się dzieje skoro był ustawiony na 0?
Jak macie jeszcze jakieś rady to chętnie skorzystam. To moja pierwsza stronka od podstaw i pewnie błędów jest od cholery.
https://codepen.io/mizeriowy/pen/rLmAgP
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Jan Kowalski">
<meta name="description" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto laboriosam eveniet repudiandae dolores, autem alias? Voluptas enim nam, debitis fugit">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a class="logo" href="#">Witaj na kowalski.com</a></li>
</ul>
<ul>
<li><a href="#">O mnie</a></li>
<li><a href="#">Umiejętności</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<header></header>
</body>
</html>
Css
*{
margin: 0px;
}
body{
font-size: 20px;
color: #fff;
margin-left: -40px;
}
.logo{
font-size: 130%;
}
nav{
display: flex;
justify-content: space-between;
background: hsla(245, 9%, 25%, 1);
}
nav ul{
display: flex;
list-style: none;
}
nav ul li a{
display: block;
text-decoration: none;
text-align: center;
color: #fff;
}
nav ul li a:hover{
background: hsla(245, 9%, 30%, 1);
}
.logo:hover{
background: hsla(245, 9%, 25%, 1);
}
header{
min-height: 250px;
background: #53C492;
}
@media screen and (min-width: 800px){
nav ul li a{
padding: 25px;
}
}
@media screen and (min-width: 300px) and (max-width: 799px){
nav{
flex-flow: column;
}
nav ul{
flex-flow: column;
}
nav ul li a{
margin: 10px 0px;
}
}