Пропала верстка.

Страница сделана так HTML

<div class="my-flex-cont">
<div class="my-flex-box">
<div class="slider"><img class="aligncenter wp-image-91" src="https://skand.doctor10.net/wp-content/uploads/2023/08/Скандинавская-ходьба-300x300.png" alt="" width="380" height="380" /></div>
<div class="header1">
<h2>СКАНДИНАВСКАЯ ХОДЬБА</h2>
</div>
<div class="paragraph">История этого удивительного явления не большая.
Всего 20 лет.</div>
</div>
<div class="my-flex-box">
<div class="slider">[metaslider id=52]</div>
</div>
<div class="my-flex-box">
<div class="header1">
<h2>ТРЕНЕРЫ</h2>
</div>
<div class="header1">
<h2>ИНТЕНТАРЬ</h2>
</div>
<div class="header1">
<h2>ТЕХНИКА ХОДЬБЫ</h2>
</div>
<div class="header1">
<h2>РЕАБИЛИТАЦИЯ</h2>
</div>
</div>
</div>
<div class="my-flex-cont1">
<div class="my-flex-box">
<h3>ДЛЯ ДЕТЕЙ</h3>
</div>
<div class="my-flex-box">
<h3>СПЕЦИАЛЬНО ДЛЯ ПОЖИЛЫХ</h3>
</div>
</div>

CSS

.my-flex-cont {
 display: flex;
 justify-content: center;
 height: 800px;
  border: 3px solid #591911;
 margin:auto;
  width:100%;
}
.my-flex-box {
	margin: 5px;
	padding: 5px;
	flex: 0 1 auto;
    border: 1px solid #137872;
  text-align:center;
}
.slider
{
  border: 1px solid #9c681a;
  margin:15px;
}
.header-l
{
border:solid 1px #9c681a;
 margin:5px;
  text-align: center;
   height:auto; 
  }
.paragraph 
{
border:solid 1px #9c681a;
  margin:5px;
  text-aling:left;
}
.my-flex-cont1
{
  display: flex;
  		flex-direction:column;
width:65%;
   border: 5px solid #9e244f; 
  margin-left:35%;
  margin-top:5px;
  height:220px;
 }
 h2
{
font-family:Intel One Mono;
  font-size:22px;
  color:#2F4F4F;
    padding:10px;
}
h3
{
 font-family:Montserrat Medium;
  font-size:20px;
  color:#2F4F4F;
    padding:10px;
}

предварительно страница сверстaна здесь https://codepen.io/aeafjusm/pen/GRwwoeq

• Тема изменена 1 год, 5 месяцев назад пользователем intman1958.

Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]