Как мне выровнять текст в теге
?
Есть файл index.html и index.css
Как я могу выровнять текст класса description, чтобы он переходил на новую строку автоматически?
И какие ошибки с CSS я допустил?
.navbar {
display: flex;
flex-wrap: wrap;
justify-content: center;
position: fixed;
top: 0;
width: 100%;
background-color: black;
}
.navbar a{
font: Arial, Sens-Serif;
font-size: 22px;
padding: 20px;
margin: 10px;
border: 2px solid black;
text-align:center;
font-weight: bold;
display:inline-block;
color: black;
background-color: white;
text-decoration:none;
width: 140px;
}
.navbar a:hover{
background-color: black;
color: white;
}
.main-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-top: 100px;
}
.article{
text-align: center;
font-weight: bold;
color: black;
background-color: white;
padding: 20px;
margin: 30px;
width: 100%;
max-width: 1200px;
text-decoration: none;
}
.article h2{
padding-bottom: 60px;
}
.article:hover{
border: 2px solid black;
}
.date{
text-align: left;
padding-top: 40px;
}
.description{
text-align: left;
}{% extends "navbar.html" %}
{% block title %}Test title index{% endblock %}
{% block head %}
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" href={{ url_for('static', filename='css/index.css') }}>
<title></title>
<div class="navbar">
<a href="#">Blog</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</head>
{% endblock %}
{% block body %}
<div class="main-container">
<a href="{{article.id}}" class="article">
<p><h2>{{ article.title }}</h2></p>
<p class="description">'aAimoIbsnXpSSMOsoRBfZviHKBXFMucCvFxTsjKUrZrgMAbojZkDDpqeBmSwSBMDoAYNfEuhJmKZxWNjsSvycIGeJnzjhYoieHHSIQlOLVmYDiuXBYHQVLMEkGCrUFivrahGArbiEHswhovDNBdqbaVBIhEJVEWprjqMkXWDDRxLYzxQjrJaYMPfsHLiqaRHatUKXcJnhuaIofocMPeIWPlxgemBPWDNEQsCnAowvsabXwrWGKFzKVVGnMgzNrpousOwrGkQhRmltuTtKgOBpkmWwWlFlNSGvGXFVmnMbYeYpmxzEBovJThBdyhlvWEcqomnpAoNlBbPNnXHeOmJjtDCKGbOrxdXpPVArUNXgJHECRMOUWRJJCWgQMqpyBHzwmbnGaCcgkqnxdMZEsLvNjVnKmrWZiYmSwRwhILDZPjlzTzOdftGPgdMMzvpWDipBMsibRrxJZrzrwLHNVulenzZRqGVVrajHYmvtRaEHQasgMeIfOMy'</p>
<p class="date">{{ article.date }}</p>
<hr>
</a>
</div>
{% endblock %}