Почему не работает CONTAINER корректно?
Хочу выравнивать сайт по сетке, через container, но container выравнивает только header.
<body>
<!----================================HEADER================================================--->
<div class="container">
<!---------------------------------container-------------------------------------------------->
<header class="header">
<nav class="nav__up">
<div id="tow">Ваш город: ... определяется ...</div>
<a class="nav__uplink" href="#">Адресса магазинов</a>
<a class="nav__uplink" href="#">Контакты</a>
<a class="nav__uplink" href="#">Доставка и оплата</a>
</nav>
<div class="header__inner">
<div class="header__logo">
<img src="img/logo.png">
</div>
<nav class="nav">
<a class="nav__link" href="#">Читай-ка</a>
<a class="nav__link" href="#">Каталог</a>
<a class="nav__link" href="#">Корзина</a>
<a class="nav__link" href="#">Личный кабинет</a>
</nav>
<form class="nav__poisk">
<input id="nav__inp" type="text" placeholder="Find text">
<button id="nav__but" type="submit"></button>
</form>
</div>
</header>
<ul class="slider">
<li>
<input type="radio" id="slide1" name="slide" checked="">
<label for="slide1"></label>
<img src="img/photo1.jpg" alt=" ">
</li>
<li>
<input type="radio" id="slide2" name="slide">
<label for="slide2"></label>
<img src="img/photo2.jpg" alt=" ">
</li>
<li>
<input type="radio" id="slide3" name="slide">
<label for="slide3"></label>
<img src="img/photo1.jpg" alt=" ">
</li>
<li>
<input type="radio" id="slide4" name="slide">
<label for="slide4"></label>
<img src="img/photo2.jpg" alt=" ">
</li>
</ul>
</div>
</body>
body{
margin: 0px;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
color: #000000;
}
*,
*:before,
*:after{
box-sizing: border-box;
}
/*---------------CONTAINER--------------*/
.container{
width: 100%;
max-width: 1440px;
margin: 0 auto;
display: grid
}
/*==================HEADER==================*/
.header{
padding: 35px;
}
.header__inner{
display: flex;
align-items: center;
justify-content: space-evenly;
align-content: space-around;
flex-direction: row;
}
/*-----------------------NAV(ссылки навигации)------------------------*/
/* - -- - - -- - -- - - Верхняя навигация - - - - - - -- - - - - -*/
.nav__up{
display: flex;
justify-content: space-around;
}
#tow{
font-weight: 900;
background: linear-gradient(to top, #C822FF, #1A6DFF); /* Градиент для текста */
-webkit-background-clip: text; /* Обрезаем фон по тексту */
-webkit-text-fill-color: transparent; /* Прозрачный текст */
}
.nav__uplink{
background: linear-gradient(to top, #C822FF, #1A6DFF); /* Градиент для текста */
-webkit-background-clip: text; /* Обрезаем фон по тексту */
-webkit-text-fill-color: transparent; /* Прозрачный текст */
margin-left: 50px;
text-decoration: none;
opacity: .70;
transition: opacity .2s
linear;
transition: font-weight .2s
linear;
}
.nav__uplink:first-child{
margin-left: 0px;
}
.nav__uplink:hover{
font-weight: 900;
opacity: 1;
}
/* -- - - -- - - - -- - Главная навигация- - - -- - - -- - - -- */
.nav{
display: flex;
}
.nav__link{
background: linear-gradient(to top, #C822FF, #1A6DFF); /* Градиент для текста */
-webkit-background-clip: text; /* Обрезаем фон по тексту */
-webkit-text-fill-color: transparent; /* Прозрачный текст */
margin-left: 50px;
text-decoration: none;
opacity: .75;
transition: opacity .2s
linear;
transition: font-weight .2s
linear;
}
.nav__link:first-child{
margin-left: 0px;
}
.nav__link:hover{
font-weight: 900;
opacity: 1;
}
/*=============== FORM POISK==============*/
.nav__poisk {
position: relative;
width: 20%;
}
#nav__inp, #nav__but {
border: none;
outline: none;
border-radius: 3px;
}
#nav__inp {
height: 42px;
background: #ffffff;
padding-left: 15px;
}
#nav__but {
background: #1A6DFF;
}
#nav__but:before {
content: "\f105";
font-family: FontAwesome;
color: #F9F0DA;
font-size: 20px;
font-weight: bold;
}
/*-----------------SLIDER---------------*/
.slider{
left: 20%;margin:-9.875em -13em;padding:.5em;position:absolute;top:40%;} /*Расположение*/
.slider li{list-style:none;position:absolute}/*кружки выбора их позиция*/
.slider input{display:none}/*Спряать поле кружков(базовых)*/
.slider label{background-color:rgb(255, 255, 255);
bottom:.5em;cursor:pointer;
display:block;height:.5em;left:24em;opacity:0;position:absolute;transition:.25s;
width:.5em;visibility:hidden;z-index:10} /*Кружки выбора их настройка формы*/
.slider label:after{border-radius:100%;
bottom:-.2em;box-shadow:inset 0 0 0 .2em rgb(255, 255, 255),inset 0 2px 2px #000,0 1px 1px hsla(0,0%,100%,.25);
content:'';left:-.2em;position:absolute;right:-.2em;top:-.2em} /*Кружки настройка цвета*/
.slider:hover label{opacity:1;visibility:visible} /*Видимость кружков*/
.slider input:checked + label{background-color:rgb(0, 0, 0)} /*Кружок checked*/
.slider:hover li:nth-child(1) label{left:.5em} /*-анимация -*/
.slider:hover li:nth-child(2) label{left:2em}/*-анимация -*/
.slider:hover li:nth-child(3) label{left:3.5em}/*-анимация -*/
.slider:hover li:nth-child(4) label{left:5em}/*-анимация -*/
.slider img{height:470px;transition:.25s;width: 1440px;
vertical-align:top;visibility:hidden}/*Photo*/
.slider li input:checked ~ img{opacity:1;visibility:visible;z-index:10} /*Photo*/