Делаю пробный сайт по урокам индусов. Но почему то текст на второй странице не переносится в середину. А именно "Товары", "----Чехлы----". Может что то не доглядел, помогите найти ошибку пожалуйста)
<code lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Art Case Store</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<header>
<div class="circle"></div>
<div class="circles"></div>
<a href="#" class="logo">ArtCaseStore</a>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Товары</a></li>
<li><a href="#">Категории</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
</ul>
<p>Войти</p>
</header>
<div class="texts">
<h1>Онлайн <span>Магазин</span></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
</div>
<div class="background_image">
<img src="image/bg1.png">
</div>
<div class="btn">
<p class="read">Read More</p>
<p>Shop Now</p>
</div>
</section>
<!--About Page-->
<div class="about">
<div class="box">
<div class="card">
<img src="image/phone-case.png">
</div>
<div class="card">
<img src="image/headphones.png">
</div>
<div class="card">
<img src="image/adapter.png">
</div>
<div class="card">
<img src="image/car-acc.png">
</div>
</div>
<hr>
<div class="Clothes">
<h1>Товары</h1>
<p>----Чехлы----</p>
<div class="clotches_box">
<div class="clotches_card">
<img src="image/nillkin-clear-blue-14pro.jpg">
<h1>Чехлы</h1>
<p>Чехлы Nillkin высокого качества.</p>
</div>
</div>
</div>
</div>
</body>
</html>
</code>
CSS
<code lang="css">
.about hr{
height: 2px;
background: #4169e1;
border-radius: 5px;
margin: 30px 110px;
}
.about .Clotches h1{
font-size: 70px;
display: flex;
justify-content: center;
align-items: center;
margin: 35px 0;
}
</code>
Скрины:
<img src="https://habrastorage.org/webt/63/6c/8e/636c8edc1583b072971912.png" alt="image"/>
<img src="https://habrastorage.org/webt/63/6c/8e/636c8ee2f3116562472241.png" alt="image"/>
Средний
