Почему когда я поменял блок div на блок main верстка сломалась (94 строка html документа)?
код html
<div class="wrapper-indent">
<!-- основной контент -->
<div class="page-main-conteiner">
<main class="content">
<!-- первый контейнер -->
<article class="main">
<div class="main-picture">
<img src="images/last-post1.jpg" class="main-imagane" alt="Берег">
</div>
<div class="post">
<ul class="main-post-categories">
<li class="main-post-category-travel"><a href="#0" class="post-travel">travel</a></li>
<li class="main-post-category-health"><a href="#0" class="post-travel">health</a></li>
</ul>
<div class="main-post-header">
<h3>
<a href="#0" class="post-header-link">10 мест, ради которых стоит проснуться на рассвете</a>
</h3>
</div>
<div class="post-category">
<time class="post-category-time" datetime="2021-02-08">10 июня 2019</time>
<address class="post-category-author">Неизвестный автор</address>
</div>
<div class="post-text">
<p>
Итак, вы в Питере. Раннее утро. Лед с рек и каналов уже ушел, запущены фантаны города... Музеи еще закрыты. Что посмотреть?
</p>
</div>
</div>
</article>
<!-- второй контейнер -->
<article class="main">
<div class="main-picture">
<img src="images/last-post2.jpg" class="main-imagane" alt="картинка">
</div>
<div class="post">
<ul class="main-post-categories">
<li class="main-post-category-travel"><a href="#0" class="post-travel">health</a></li>
<li class="main-post-category-health"><a href="#0" class="post-travel">lifestyle</a></li>
</ul>
<div class="main-post-header">
<h3>
<a href="#0" class="post-header-link">Йога для начинающих в домашних условиях</a>
</h3>
</div>
<div class="post-category">
<time class="post-category-time" datetime="2021-02-08">10 июня 2019</time>
<address class="post-category-author">Неизвестный автор</address>
</div>
<div class="post-text">
<p>
Расскажем, какие упражнения выбрать и как сделать коврик для занятий йогой для того, что можно найти в шкафу.
</p>
</div>
</div>
</article>
<!-- третий контейнер -->
<article class="main">
<div class="main-picture">
<img src="images/last-post3.jpg" class="main-imagane" alt="девушка на музыкальном фестивале">
</div>
<div class="post">
<ul class="main-post-categories">
<li class="main-post-category-travel"><a href="#0" class="post-travel">Music</a></li>
</ul>
<div class="main-post-header">
<h3>
<a href="#0" class="post-header-link">Лучшие музыкальные фестивали этого лета</a>
</h3>
</div>
<div class="post-category">
<time class="post-category-time" datetime="2021-02-08">10 июня 2019</time>
<address class="post-category-author">Неизвестный автор</address>
</div>
<div class="post-text">
<p>
Лето на носу, а с ним и музыкальные фестивали. На каком же из них вы разобьете свою палатку?
</p>
</div>
<div class="post-text-under">
<p>
Мы составили список лучших летних фестивалей по всему миру.
</p>
</div>
</div>
</article>
<!-- четвертый контейнер -->
<article class="main">
<div class="main-picture">
<img src="images/last-post4.jpg" class="main-imagane" alt="картинка">
</div>
<div class="post">
<ul class="main-post-categories">
<li class="main-post-category-travel"><a href="#0" class="post-travel">lifestyle</a></li>
<li class="main-post-category-health"><a href="#0" class="post-travel">food</a></li>
</ul>
<div class="main-post-header">
<h3>
<a href="#0" class="post-header-link">Наукоёмкий подход к кулинарии</a>
</h3>
</div>
<div class="post-category">
<time class="post-category-time" datetime="2021-02-08">10 июня 2019</time>
<address class="post-category-author">Неизвестный автор</address>
</div>
<div class="post-text">
<p>
Узнаем основы проектирования новых пищевых и около-пищевых опытов, вскроем физику, химию и микробиологию еды.
</p>
</div>
</div>
</article>
<!-- пятый контейнер -->
<article class="main">
<div class="main-picture">
<img src="images/last-post5.jpg" class="main-imagane" alt="картинка">
</div>
<div class="post">
<ul class="main-post-categories">
<li class="main-post-category-travel"><a href="#0" class="post-travel">lifestyle</a></li>
<li class="main-post-category-health"><a href="#0" class="post-travel">interior</a></li>
<li class="main-post-category-health"><a href="#0" class="post-travel">art</a></li>
</ul>
<div class="main-post-header">
<h3>
<a href="#0" class="post-header-link">Делаем модные принты на подушках для интерьера</a>
</h3>
</div>
<div class="post-category">
<time class="post-category-time" datetime="2021-02-08">10 июня 2019</time>
<address class="post-category-author">Неизвестный автор</address>
</div>
<div class="post-text">
<p>
Подушки для дивана целесообразнее заказать на в съемных чехлах на молниях, если потребуется чистка подушек, проще снять чехлы, чем везти подушку в химчистку.
</p>
</div>
</div>
</article
</main>
</div>
код css
.wrapper-indent{
margin-top: 60px;
}
.page-main-conteiner {
display: flex;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
max-width: 1200px;
}
@media (min-width: 1200px) {
.main {
display: flex;
width: 780px;
}
}
@media (min-width: 641px) and (max-width: 1200px) {
.main {
display: block;
width: 100%;
}
.content {
width: 56%;
}
.aside-page {
margin-left: 35px;
margin-left: 5.5%;
width: 33%;
}
.page-main-conteiner {
display: flex;
justify-content: space-between;
width: 92%;
}
}
.main:nth-child(n + 2) {
margin-top: 60px;
}
.main-picture{
width: 100%;
}
.post {
display: block;
margin-left: 30px;
}
.main-post-categories {
display: flex;
flex-wrap: wrap;
text-transform: uppercase;
text-decoration: none;
list-style-type: none;
}
.post-travel {
text-decoration: none;
color: #b59f5b;
cursor: pointer;
font-weight: bold;
}
.main-post-category-travel {
font-size: 14px;
height: 18px;
margin-right: 20px;
color: #b59f5b;
text-transform: uppercase;
text-decoration: none;
}
.main-post-category-health {
font-size: 14px;
height: 18px;
color: #b59f5b;
text-transform: uppercase;
text-decoration: none;
}
.main-post-category-travel:hover,
.main-post-category-health:hover {
border-bottom: 2px solid #b59f5b;
}
.main-post-header {
margin-top: 7px;
font-size: 16px;
display: block;
text-transform: uppercase;
font-weight: bold;
}
.post-header-link:hover {
color: #b59f5b;
}
.post-category {
display: flex;
margin-top: 26px;
}
.post-category-time {
font-size: 12px;
color: #999999;
}
.post-category-author {
font-size: 12px;
margin-left: 15px;
font-weight: 700;
font-style: normal;
}
.post-text {
margin-top: 46px;
font-size: 15px;
line-height: 22px;
}
.post-text-under {
margin-top: 15px;
font-size: 15px;
}