h2タグとpタグが横並びになるため縦に並ぶように修正したい１冊ですべて身につくHTML＆CSSとWebデザイン入門講座　

実現したいこと

post-titleクラスとpost-catクラスを縦に並べたい

発生している問題

<h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>と<p class="post-cat">カテゴリー：お店の紹介</p>を縦に並べたいが横に並んでしまう。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>WCB Cafe-NEWS</title>
6        <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
7        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
8        <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
9        <link href="css/style.css" rel="stylesheet">   
10        <link rel="icon" type="image/pmg" href="images/favicon.png"> 
11    </head>
12    <body>
13      <div id="news" class="big-bg">
14        <header class="wrapper">
15          <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
16          <nav>
17            <ul class="main-nav">
18              <li><a href="news.html">NEWS</a></li>
19              <li><a href="menu.html">MENU</a></li>
20              <li><a href="contact.html">CONTACT</a></li>
21            </ul>
22          </nav>
23        </header> 
24        <div class="wrapper">
25          <h2 class="page-title">News</h2>
26        </div>
27      </div>
28      <!--news contents-->
29      <div class="news-contents wrapper">
30        <article>
31          <header class="post-info">
32            <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>
33            <p class="post-date">3/30 <span>2019</span></p>
34            <p class="post-cat">カテゴリー：お店の紹介</p>
35          </header>
36        </article>
37        <aside>
38          サブ記事
39        </aside>
40      </div>
41      <!--news contentsここまで-->
42      <footer>
43        <div class="wrapper">
44          <P><small>&copy;2019Manabox</small></P>
45        </div>
46      </footer>
47    </body>
48</html>
49

CSS
1/*共通部分*/
2html{
3  font-size: 100%;
4}
5body{
6  font-family:"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;
7  line-height: 1.7;
8  color: #432;
9}
10a{
11  text-decoration: none;
12}
13img{
14  max-width:100%;
15}
16*{
17  outline: 1px solid red;
18}
19/*ヘッダー*/
20.logo{
21  width:210px;
22  margin-top: 14px;
23}
24.main-nav{
25  display:flex;
26  font-size: 1.25rem;
27  text-transform: uppercase;
28  margin-top:34px;
29  list-style: none;
30}
31.main-nav li{
32  margin-left:36px;
33}
34.main-nav a{
35  color: #432;
36}
37.main-nav a:hover{
38  color:#0bd;
39}
40header{
41  display: flex;
42  justify-content: space-between;
43}
44.wrapper{
45  max-width:1100px;
46  margin:0 auto;
47  padding:0 4%;
48}
49/*ホーム*/
50.home-content{
51  text-align: center;
52  margin-top: 10%;
53}
54.home-content p{
55  font-size: 1.125rem;
56  margin:10px 0 42px;
57}
58.page-title{
59  font-size: 5rem;
60  font-family: 'Philosopher',serif;
61  text-transform: uppercase;
62  font-weight: normal;
63}
64.btn{
65  font-size: 1.375rem;
66  background:#0bd;
67  color: #fff;
68  border-radius: 5px;
69  padding: 18px 32px;
70}
71.btn:hover{
72  background:#0090aa;
73}
74.big-bg{
75  background-size: cover;
76  background-position: center top;
77  background-repeat: no-repeat;
78}
79#home{
80  background-image:url(../images/main-bg.jpg), linear-gradient(#c9ffbf,#ffafbd);
81  background-blend-mode: hard-light;
82  min-height: 100vh;
83}
84#home .page-title{
85  text-transform: none;
86}
87#news {
88  background-image: url(../images/news-bg.jpg);
89  height:270px;
90  margin-bottom: 40px;
91}
92#news .page-title{
93  text-align: center;
94}
95/*footer*/
96footer{
97  background-color: #432;
98  text-align: center;
99  padding: 26px;
100}
101footer p{
102  color:#fff;
103  font-size: 0.875rem;
104}
105.news-contents{
106  display: flex;
107  justify-content: space-between;
108  margin-bottom: 50px;
109}
110/*記事部分*/
111article{
112  width:74%;
113}
114/*サイドバー*/
115aside{
116  width:22%;
117}
118.post-info{
119  position:relative;
120  padding-top: 4px;
121  margin-bottom: 40px;
122}
123.post-date{
124  background-color: #0bd;
125  border-radius: 50%;
126  color: #fff;
127  width: 100px;
128  height:100px;
129  font-size :1.625em;
130  text-align: center;
131  position: absolute;
132  top:0;
133  padding-top:10px;
134}
135.post-date span{
136  font-size: 1rem;
137  border-top: 1px rgba(255,255,255,5)solid;
138  padding-top:6px;
139  display: block;
140  width:60%;
141  margin:0 auto;
142}
143.post-title{
144  font-family: "Yu Mincho","Yu Mincho",serif;
145  font-size:2rem;
146  font-weight: normal;
147}
148.post-title,.post-cat{
149  margin-left: 120px;
150}