Надпись с датой side-date
смещается в левую сторону, хотя должна быть вверху относительно заголовка. Пробовал flex-direction
, но не работает
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
margin: 0px;
}
.side-bar {
width: 272px;
background-color: #f4f7f6;
}
.side-news-header-title {
text-align: center;
font-size: 14px;
}
.side-news-header-title::after {
content: "";
display: block;
margin-left: auto;
margin-right: auto;
width: 66px;
height: 3px;
background-color: #e1d9bd;
margin-top: 12px;
margin-bottom: 29px;
}
.side-img {
display: block;
width: 70px;
height: 70px;
margin-right: 20px;
}
.side-block {
display: flex;
width: 272;
margin-bottom: 22px;
}
.side-title {
font-size: 14px;
text-transform: uppercase;
margin-top: 0;
}
.side-date {}
.side-date-title {
font-family: 12px;
opacity: 50%;
font-weight: 400;
font-size: 12px;
}
<aside class="side-bar">
<div class="side-news-header">
<h3 class="side-news-header-title">Новые посты</h3>
</div>
<div class="side-block">
<img class="side-img" src="https://netology-code.github.io/html-2-diploma/sources/images/last-post1.jpg">
<div class="side-date">
<span class="side-date-title">14 июня 2019</span>
</div>
<h4 class="side-title">10 мест, ради которых стоит проснуться</h4>
</div>
</aside>