Edit : I just saw that it is the ul, but shouldn't I leave the margin relative to the parent?
I'm making something as simple as a header, but for some reason inserting a margin in ul
it produces the margin outside the parent container.
HTML code:
<body>
<div class="wrapper">
<div class="header">
<ul class="menu">
<li>
<a href="#">Inicio</a>
</li>
</ul>
</div>
</div>
</body>
CSS code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
.wrapper {
max-width: 1440px;
margin: auto;
}
.wrapper .header {
height: 800px;
width: 100%;
background-image: url("../imgs/header/header.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.wrapper .header::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: .2;
z-index: 1;
}
.wrapper .header .menu {
margin: 100px 0 0 10px;
text-transform: uppercase;
}
.wrapper .header .menu li {
padding-left: 100px;
}
.wrapper .header .menu li a {
color: #fff;
font-size: "open-sans";
}
Link to the JSFiddle that reproduces the same error: https://jsfiddle.net/5gf3g58v/
That "phenomenon" is called collapsed margins, it's defined in the CSS Box model specification. There are several ways to solve the problem, one of the most common is to use padding instead of margin on the child element: