Не могу вытеснить дочерний элемент(блок "static",он должен красоваться на фоне блока "main-header__logo") из родителя(блок "static-and-quality"), пользовался отрицательным марджином, хотел уже воспользоваться абсоблютом, но здравый смысл меня остановил. Какие еще есть способы "вытеснения"? Так же буду рад советам по остальному дерьму, что я написал)
HTML(не судите строго за БЭМ и семантические теги, пока не разобрался как их использовать)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barbershop</title>
</head>
<body>
<div class="wrapp">
<header class="main-header">
<div class="main-header__container">
<nav class="main-header__nav">
<ul class="nav__go">
<li class="nav__li"><a href="index.html" class="nav__a">Главная</a></li>
<li class="nav__li"><a href="#" class="nav__a">Наши работы</a></li>
<li class="nav__li"><a href="#" class="nav__a">Записаться</a></li>
<li class="nav__li"><a href="#" class="nav__a">Контакты</a></li>
<li class="nav__li"><a href="#" class="nav__a">Html Academy</a></li>
</ul>
<ul class="nav__login">
<li class="nav__li"><a href="#" class="nav__a">Вход</a></li>
</ul>
</nav>
</div>
<section class="main-header__logo">
<div class="logo__container">
<h3 class="logo__speciality">Barbershop</h3>
<h2 class="logo__name"><span class="rhombus-left"></span>Borodinski<span class="rhombus-right"></span></h2>
<img src="object/logo__img.png" alt="" class="logo__img">
</div>
</section>
</header>
<main class="main-content">
<section class="static-and-quality">
<div class="static">
<div class="static__title-container">
<h3 class="static__title">Стрижка у нас это выгодно!</h3>
<p class="static__text">Мужская стрижка требует точного подхода. Обратимся <br> к статистике:</p><br>
<span class="static__carefull">* — приведённые данные ложь</span>
</div>
<div class="static__quality">
<div class="quality__row-top">
<div class="quality__item quality__item--color1">
<span class="quality__number quality__number--star">1 500</span>
<br>
<span class="quality__tagline">рублей вложений</span>
</div>
<div class="quality__item quality__item--color2">
<span class="quality__number">7 200</span>
<br>
<span class="quality__tagline">секунд времени мастера</span>
</div>
</div>
<div class="quality__row-bottom">
<div class="quality__item quality__item--color3">
<span class="quality__number">90 000</span>
<br>
<span class="quality__tagline">постриженных волос</span>
</div>
<div class="quality__item quality__item--color1">
<span class="quality__number quality__number--star">500 000</span>
<br>
<span class="quality__tagline">лайков и комплиментов</span>
</div>
</div>
</div>
</div>
</section>
</main>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700');
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@font-face {
font-family: "SatisfyRegular";
src: url("../fonts/SatisfyRegular/satisfy-regular.eot");
src: url("../fonts/SatisfyRegular/satisfy-regular.eot?#iefix")format("embedded-opentype"),
url(../fonts/SatisfyRegular/satisfy-regular.woff)format("woff"),
url(../fonts/SatisfyRegular/Satisfy-Regular.ttf)format("truetype");
font-style: normal;
font-weight: normal;
}
* {
box-sizing: border-box;
}
body{
font-family: 'PT Sans Narrow', sans-serif;
}
/*-------MAIN-NAV-------*/
.main-header__container {
min-height: 70px;
background-color: #000;
font-weight: bold;
}
.main-header__nav {
width: 960px;
margin: 0 auto;
}
.main-header__nav:after {
content: "";
display: block;
clear: both;
}
.nav__go {
float: left;
font-size: 0px;
}
.nav__li {
font-size: 18px;
display: inline-block;
list-style: none;
transition: 0.3s;
}
.nav__li:hover {
background-color: #826550;
}
.nav__a {
display: inline-block;
padding: 30px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
text-align: center;
letter-spacing: -.2px;
word-spacing: -.9px;
border: 9px solid transparent;
transition: 0.3s;
}
.nav__a:active {
border: 9px solid #826550;
}
.nav__login {
float: right;
}
/*-------MAIN-NAV-------*/
/*-------LOGO-------*/
.main-header__logo {
min-height: 650px;
padding: 60px 0 430px;
background-image: url(../object/background-header-logo.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center; /*Сократить код фона и поставить норм позиционирование*/
color: #fff;
}
.logo__container {
width: 960px;
margin: 0 auto;
text-align: center;
}
.logo__speciality {
margin-bottom: 25px;
font-family: "SatisfyRegular";/*Подключить и поставить рукописный шрифт*/
font-size: 36px;
font-style: italic;/*Посмотреть сокрашенную запись*/
}
.logo__name {
display: inline-block;
margin: 0 -20px 0;
font-size: 46px;
font-family: 'Fjalla One', sans-serif;
font-weight: bold;
letter-spacing: 13px;
text-shadow: 4px 3px 0px #000, 6px 4px 0px #636466;
text-transform: uppercase;
}
.rhombus-left,
.rhombus-right {
content: "";
display: inline-block;
margin: 15px 20px;
width: 10px;
height: 10px;
background: #fff;
text-shadow: 4px 3px 0px #000, 6px 4px 0px #636466;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.rhombus-left {
float: left;
}
.rhombus-right {
float: right;
}
.logo__img {
width: auto;
height: auto;
margin: 0 auto;
display: block;
}
/*-------LOGO-------*/
.static-and-quality {
height: 555px;
background-color: #353535;
}
.static {
width: 960px;
margin: -160px auto 0;
position: relative;
background-color: transparent;
}
.static::after {
content: "";
display: block;
clear: both;
}
.static__title-container {
max-width: 320px;
max-height: 315px;
min-height: 315px;
padding: 25px 40px 35px 25px;
position: relative;
float: left;
background-color: #fff;
}
.static__title {
padding: 0 0 55px;
color: #000;
font-size: 40px;
font-weight: bold;
}
.static__text {
font-size: 20px;
padding: 0 0 20px;
}
.static__carefull {
color: #d2d2d2;
}
.static__quality {
float: left;
color: #fff;
}
.quality__row-top,
.quality__row-bottom {
font-size: 0;
}
.quality__row-top::after,
.quality__row-bottom::after {
content: "";
display: block;
clear: both;
}
.quality__item {
min-width: 320px;
max-height: 157.5px;
padding: 25px 35px 60px;
display: inline-block;
}
.quality__item--color1 {
background-color: #404040;
}
.quality__item--color2 {
background-color: #4e4e4e;
}
.quality__item--color3 {
background-color: #353535;
}
.quality__number {
display: inline-block;
padding: 0 0 10px 0;
font-size: 72px;
font-weight: bold;
}
.quality__number--star::after {
content: "*";
display: inline-block;
font-size: 30px;
vertical-align: top;
}
.quality__tagline {
font-size: 20px;
}
