strong text
It's puzzling to me why my header shifts downward when I add a margin-top to its child element (.navigation). When I apply padding, the header remains at the top. Can someone please explain why this happens? I've read that setting overflow: auto can solve the issue (and it does), but why is that the case?
/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* VARIABLES */
:root {
--pimery_color: #fff;
--accent: #FBD784;
}
/* BODY */
body {
font-family: 'Gilroy';
font-weight: 700;
font-style: normal;
font-size: 18px;
color: var(--pimery_color);
background-color: #0B1D26;
}
/* HEADER */
.header {
background-color: red;
}
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-top:100px;
}<header class="header">
<div class="navigation">
<p class="logo">MNTN</p>
<nav class="nav">
<ul>
<a href="#">Equipment</a>
</ul>
<ul>
<a href="#">About us</a>
</ul>
<ul>
<a href="#">Blog</a>
</ul>
</nav>
<div class="account">
<img src="./img/svg/acc.png" alt="account logo for login" />
<a href="#">Account</a>
</div>
</div>
</header>