Добрый вечер! Парни, учусь верстать сайты, сталкиваюсь с проблемами.
Суть в чем: есть блок с бэкграунд-имейджем. Он выбивается с потока, не могу его спозиционировать, соответственно следующие блоки сайта, которые созданы в HTML налазят на этот див с картинкой. Объясните, как исправить и в чем собственно дело?
Ещё -
Почему блок не видит марджина у блока, на который он залез?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Inter;
font-style: Regular;
font-size: 16px;
}
.wrapper {
min-height: 100%
width: 1440px
}
.header { ( ХЕДЕР)
width: 1440px;
height: 120px;
margin: 0 auto;
background-color: #4A2B33;
}
.header-inner { (ВНУТРЕННИЙ БЛОК В ХЕДЕРЕ, КОТОРЫЙ СЛУЖИТ ОБОЛОЧКОЙ ДЛЯ ВСЕХ ЭЛЕМНТОВ ХЕДЕРА )
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding-top: 22.5px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 22.5px;
}
.nav ul { ( меню)
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.nav li {
list-style: none;
display: block;
color: #D27487;
margin-right: 20px;
}
.logo { (центральная надпись latter cafe )
text-transform: uppercase;
color: #D27487;
font-size: 25px;
}
.tool { ( ФЕЙСБУК, ИНСТ И ПОЧТА)
width: 102px;
height: 24px;
position: relative;
}
.tool img {
width: 23.2px;
height: 19px;
}
.tool .inst-icon{
display: inline-block;
height: 27px;
width: 29px;
position: absolute;
top: -4px;
right: 24px;
}
.header-image { ( ПРОБЛЕМНЫЙ БЛОК )
height: 644px;
margin: 0 auto;
background-image: url("images/header-image.png");
background-repeat: no-repeat;
background-size: cover;
margin-top: 45px;
}
}
.wrapper-aboutus { -следующий блок, который идёт после header-image-
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 869px;
height: 264px;
}
Средний
