Olá, pessoal, tudo certo?
Estou com um problema que não consegui "resolver".
A questão foi que tentei fazer um layout diferente da aula. Para treinar, transformei o menu com layout de botão representado na cor azul, mas tive um comportamento estranho dos elementos do menu <nav>,<ul>,<li>, <a> que escapam para fora do limite do <header>.
Achei estranho, pois até este momento do curso pensei que um elemento dentro do bloco, não escapava para o elemento seguinte, a não ser que forçasse isso com posicionamentos relativos, absolutos... Pensei que o bloco header fosse uma cápsula.
Porque esse elemento "botão" do menu escapou para o elemento seguinte? e como resolver?
html simplificado.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Barbearia Alura</title>
<link rel="stylesheet" href="folha de estilo/reset#.css">
<link rel="stylesheet" href="folha de estilo/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="https://placehold.it/177x250" alt="Logo da Barbearia Alura"></h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</div>
</header>
<img class="banner" src="https://placehold.it/800x300" alt="Foto interna da barbearia com duas cadeira de barbeiro em primeiro plano e ao fundo o balcão">
<main>
<p>conteúdo</p>
</main>
<footer>
<p class="copyright">© Copyright Barbearia Alura - 2019</p>
</footer>
</body>
</html>CSS Simplificado.
body {
font-family: 'Montserrat', sans-serif;
background: #f4f4f4;
}
header {
background: #bbbbbb;
padding:20px 0 0;
}
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
}
nav {
}
nav li {
display: inline;
margin: 0 0 0 15px;
}
nav a {
background: #539be1;
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
padding: 20px;
}
nav a:hover {
color: #c78c19;
text-decoration: underline;
}
footer {
background: #333333;
text-align: center;
padding: 40px 0;
}
.copyright {
color: #FFFFFF;
font-size: 13px;
margin: 20px 0 0;
}
.banner {
width: 100%;
}P.S: O que escapou foi padding com a cor azul de background, não o texto do menu, pra me deixar mais confuso ainda.... rs!
Espero ter consegui demonstrar minha dúvida.
