Why my elements are outside their container? - html

Question

I can't figure out why my elements (logo, menu, info box) are outside the light grey container. Could you help me? Many thanks
See: http://jsfiddle.net/vqoudo6d/3/
HTML:
<header class="header">
<div class="header-wrapper">
<img class="header-logo" src="http://lorempixel.com/output/fashion-q-g-284-119-5.jpg">
<nav class="header_nav">
<ul class="header_nav-wrapper">
<li class="header_nav-item"> <a id="aboutOpen" class="header_nav-item-a" href="jkk">l'Atelier</a>
</li>
<li class="header_nav-item"> <a class="header_nav-item-a header_nav-item-a--btn" href="jkjks" target="_blank">La Carte des soins</a>
</li>
<li class="header_nav-item"> <a class="header_nav-item-a header_nav-item-a--btn" href="jkjks" target="_blank">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="infos-pratiques clearfix">
<p class="info-pratiques-tag">Informations pratiques</p>
<div class="info-pratiques-content">
<p>3 rue dfdsf
<br>sdsqdssdd</p>
<p>Lundi:
<br>Mardi:
<br>Mercredi:
<br>Jeudi</p>
</div>
</div>
</header>
<div class="slider">
<ul class="slider__wrapper">
<li class="slider__item">
<div class="box" style="background-image:url(images/test.jpg);background-size: cover;
background-repeat: no-repeat; background-position: 50% 50%;"></div>
</li>
<li class="slider__item">
<div class="box" style="background-image:url(images/test2.jpg);background-size: cover;
background-repeat: no-repeat; background-position: 50% 50%;"></div>
</li>
</ul>
</div>
CSS:
.slider {
position: relative;
margin-left: auto;
margin-right: auto;
width: 90%;
height: 550px;
background: #eee;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
max-width: 1200px;
}
.slider__wrapper {
height: 100%;
list-style: none;
overflow: hidden;
*zoom: 1;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
.slider__item {
height: 100%;
float: left;
clear: none;
}
.slider__arrows-item {
position: absolute;
display: block;
margin-bottom: -20px;
padding: 20px;
}
.slider__arrows-item--right {
bottom: 50%;
right: 30px;
}
.slider__arrows-item--left {
bottom: 50%;
left: 30px;
}
.slider__nav {
position: absolute;
bottom: 30px;
}
.slider__nav-item {
width: 12px;
height: 12px;
float: left;
clear: none;
display: block;
margin: 0 5px;
background: #fff;
}
.slider__nav-item--current {
background: #ccc;
}
.slider__nav-item:hover {
background: #ccc;
}
.box {
width: 100%;
height: 100%;
}
.header {
z-index: 999;
width: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
}
.header-wrapper {
padding: 54px 60px;
}
.header-logo {
float: left;
clear: none;
}
.header_nav {
float: right;
clear: none;
font-family:'Maven Pro', sans-serif;
font-weight: normal;
}
.header_nav-wrapper {
list-style: none;
}
.header_nav-item {
margin-left: 22px;
float: left;
clear: none;
}
.header_nav-item-a {
color: #474032;
text-decoration: none;
}
.header_nav-item-a:hover {
color: #eee;
}
.header_nav-item-a--btn {
padding: 16px 18px;
border-radius: 5px;
border: 1px solid #474032;
background-color: transparent;
}
.header_nav-item-a--donate {
margin-top: -18px;
}
.header_nav-item-a--btn:hover {
border: 1px solid #eee;
}
.info-pratiques-content {
float: left;
clear: both;
margin-top: 14px;
margin-left: 4.52489%;
font-size: 13px;
line-height: 1.38;
color: #433d2b;
}
.info-pratiques-content p {
margin-bottom: 1em;
}
.info-pratiques-tag {
margin-top: 14px;
margin-right: auto;
margin-left: auto;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
background-color: #9d926a;
font-size: 13px;
font-weight: 400;
line-height: 1.38;
text-align: center;
text-transform: uppercase;
color: rgb(65, 61, 45);
}
.infos-pratiques {
position: absolute;
top: 217px;
right: 5.1984375%;
z-index: 26;
width: 221px;
height: 200px;
background-color: rgb(222, 222, 222);
opacity: 0.91;
}

Answer 1

The max-width and the background are on .slider, but your header is not inside of it. just add the background and max-width to body and everything should be fine.
Also keep in mind that absolutely positioned elements are always relative to the closest non-static element (position: fixed, relative, absolute).
edit: I also agree with Paulie_D's comment, try to reduce absolute positioning