ｐタグのpost-catクラスがh2の横に表示される。ｈ２のすぐ下にpostcatクラスのpを表示したいです。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WCB Cafe</title>
  <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
  <link rel ="stylesheet" href="news.css">
  <link rel ="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link href ="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
  <link rel ="icon" type="image/png" href="images/favicon.png"> 
</head>
  
<div id ="news" class="big-bg">
    <header class="wrapper">
      <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WVBカフェホーム"></a></h1>
      <nav>
        <ul class="main-nav" >
          <li><a href="news.html">news</a></li>
          <li><a href="menu.html">menu</a></li>
          <li><a href="contact.html">contact</a></li>
        </ul>
      </nav>

    </header>
    <div class="wrapper">
      <h2 class="page-title">news</h2>
    </div>
    
    
</div>
<div class="news-contents wrapper">
  <article>
    <header class="post-info">
      <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>
      <p class="post-date">12/27<span>2020</span></p>
      <p class="post-cat">カテゴリー:お店の紹介</p>

    </header>
  </article>
  <aside>
    サイドバー
  </aside>
</div>
<footer>
  <div class="wrapper">
    <p><small>&copy; 2019 Manabox</small></p>
  </div>
</footer>

</body>
</html>```ここに言語を入力
コード@charset "utf-8";

body {
  font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, "ヒラギノ角ゴ Pro W3", sans-serif;
  line-height:1.7;
  color:#432;
}

html {
  font-size:100%;
}
img {
  max-width:100%;
}

a {
  text-decoration:none;
}
header {
  display:flex;
  justify-content:space-between;
  
}
.wrapper {
  max-width:1100px;
  padding:0 4%;
  margin:0 auto;
}
.logo {
  width:210px;
  margin-top:14px;
}

.main-nav {
  display:flex;
  font-size:1.25rem;
  text-transform:uppercase;
  margin-top:34px;
  list-style:none;
  text-align:right;
}

.main-nav li {
  margin-left:36px;
}
.main-nav a {
  color:#432;
}
.main-nav a:hover {
  color:#0bd;
}
/*  */


.home-content {
  margin-top:10px;
  text-align:center;
  margin-top:10%;
}
.home-content p {
  font-size:1.125rem;
  margin:10px 0 42px;

}
.page-title {
  font-size:5rem;
  text-transform:uppercase;
  font-family:'Philosopher', serif;
  font-weight:normal;
  display:block;
  

}

.button:hover {
  background:#0090aa;
}

.big-bg {
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
}
#home {
  background-image:url(images/main-bg.jpg);
  min-height:100vh;
  /* background-color:#0bd; */
  /* background-blend-mode:hard-light; */
 
  /* background-blend-mode:luminosity; */

}
#home .page-title {
  text-transform:none;

}
.button {
  font-size:1.375rem;
  background:#0bd;
  color:#fff;
  border-radius:5px;
  padding:18px 32px;
}
.button:hover {
  padding:#0090aa;

}

#news {
  background-image:url(images/news-bg.jpg);
  height:270px;
  margin-bottom:40px;
  
}
#news .page-title {
  text-align:center;
}
.post-info {
  position:relative;
  padding-top:4px;
  margin-bottom:40px;
}
.post-date {
  background-color:#0bd;
  width:100px;
  height:100px;
  color:#fff;
  position:absolute;
  border-radius:50%;
  top:0;
  padding-top:10px;
  text-align:center;
  font-size:1.625rem;

}
.post-date span {
  font-size:1rem;
  border-top:1px rgba(255,255,255,.5) solid;
  padding-top:6px;
  display:block;
  width:60%;
  margin:0 auto;
}
.post-title {
  font-size:2rem;
  font-family:"Yu Mincho", "YuMincho", serif;
  font-weight:normal;
}
.post-title,
.post-cat {
  margin-left:120px;
  
}
.post-cat {
}
article {
  width:74%;
}
aside {
  width: 24%;
}
.news-contents {
  display:flex;
  justify-content:space-between;
  margin-bottom:50px;
  
}
footer {
  background:#432;
  text-align:center;
  padding:26px 0;
}

footer p {
  color:#fff;
  font-size:0.875rem;
}





### 試したこと
手本と比較
font-size変更

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

header { display: flex; } が効いて横並びになってます。

.post-infoのタグを div に修正するか、下記のように display: block; で flex を打ち消せばいいでしょう。

css
1.post-info {  
2  position:relative;  
3  padding-top:4px;  
4  margin-bottom:40px;  
5  display: block; /* 追加 */
6}

投稿2020/12/27 11:08

hatena19

総合スコア34073

beginner

2020/12/27 11:13

ありがとうございます！解決しました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

ｐタグのpost-catクラスがh2の横に表示される。ｈ２のすぐ下にpostcatクラスのpを表示したいです。

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

関連した質問