Объясните как я должен от центровать блок который находится между хедером и футером, так , чтобы он был между ними на одинаковом расстоянии, margin: auto 0 не срабатывает для main__container,а задавать display: flex align-items:center для main, не очень то и хочется так как считаю что это неправильный подход.
<body>
<div class="wrapper">
<img src="images/background.jpg" alt="KAMAZ">
<div class="wrapper__background"></div>
</div>
<header class="header">
<div class="container">
<div class="header__container">
<div class="header__elements">
<div class="header__element"><span class="header__logotype"><a href="#" class="header__logotype-link">MTS</a></span></div>
<div class="header__element"><a href="tel:+7 777 777 77 77" class="header__phone">+7 777 777 77 77</a></div>
</div>
</div>
</div>
</header>
<main class="main">
<section class="modern">
<div class="container">
<div class="modern__container content">
<div class="modern__items">
<div class="modern__information">
<div class="modern__maintext">Modern</div>
<div class="modern__maintext">Tradind</div>
<div class="modern__maintext">Solutions</div>
<div class="modern__text">это сервис где вы можете легко и удобно торговаться бетоном</div>
</div>
<div class="modern__form">
<div class="form__block">
<span>Вход</span><span>|</span><span>Регистрация</span>
<form action="" class="main__form">
<input type="text" class="main__form-input">
<input type="password" class="main__form-input">
<input type="submit" class="main__form-submit">
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer__container">
<div class="footer__items">
<div class="footer__item">
<div class="item-company"><a href="">Modern Tradind Solutions 2021</a></div>
<div class="item-phone"><a href="tel:+7 777 777 77 77">+7 777 777 77 77</a></div>
</div>
<div class="footer__item">
<div class="item-dev"><a href="#">Разработка сайтов</a></div>
</div>
</div>
</div>
</div>
</footer>
<script src="scripts/script.js"></script>
</body>
body {
font-family: 'Proxima Nova';
font-size: 18px;
font-style: normal;
font-weight: normal;
color: #fff;
}
@media(max-width: 1920px) {
.container {
width: 1460px;
margin: 0 auto;
padding: 0 10px;
}
}
@media (max-width: 1560px) {
.container {
width: 1360px;
}
}
@media (max-width: 1460px) {
.container {
width: 1260px;
}
}
@media (max-width: 1360px) {
.container {
width: 1060px;
}
}
@media (max-width: 1260px) {
.container {
width: 992px;
}
}
@media (max-width: 992px) {
.container {
width: 100%;
}
}
/*background image*/
.wrapper {
position: relative;
}
.wrapper img {
position: absolute;
height: 100vh;
width: 100%;
object-fit: cover;
z-index: -9;
}
.wrapper__background {
position: absolute;
height: 100vh;
width: 100%;
background: rgba(22, 22, 22, 0.68);
z-index: -9;
}
/*background image*/
/*header*/
/*.header {
position: absolute;
width: 100%;
}*/
.header__container {
padding: 20px 0;
}
.header__elements {
display: flex;
justify-content: space-between;
align-items: center;
}
.header__logotype {
font-size: 53px;
font-weight: 700;
text-transform: uppercase;
}
.header__phone {
position: relative;
}
.header__phone:hover::after {
width: 100%;
}
.header__phone::before {
position: absolute;
content: "";
width: 22px;
height: 22px;
top: 0;
left: -20%;
background-image: url('../images/phone.svg');
background-repeat: no-repeat;
background-size: 22px;
}
.header__phone::after {
position: absolute;
content: "";
bottom: 0;
right: 0;
width: 0;
height: 1px;
background-color: #fff;
transition: .5s;
}
/*header*/
/*modern section*/
.modern__items {
display: flex;
justify-content: space-between;
}
.modern__information,
.modern__form {
width: 35%;
}
.modern__information {
border-left: 13px solid #AF3433;
padding-left: 30px;
}
.modern__maintext {
font-size: 64px;
font-weight: 700;
line-height: 120%;
letter-spacing: 0em;
text-transform: uppercase;
}
.modern__text {
font-size: 24px;
}
/*modern section*/
/*footer*/
.footer__container {
padding: 50px 0;
}
/*footer*/
Простой
Простой