HTML 　文字収まりの原因がわかりません。

現在、テキストに沿って学習中ですが、なぜかarticle部分の文字がサイドバー部分より下がってしまいます。
また、日付の部分について、完成はきっちり中央に綺麗に収まるはずなのですが、左寄りになってしまいます。
先に進めず途方に暮れております。ご教授頂ける方、何卒よろしくお願いいたします。

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    フードを提供するカフェ">
8
9<!-- CSS -->
10    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
11    <link href="https://fonts.googleapis.com/css2?family=Philosopher" rel="stylesheet">
12    <link href="css/style.css" rel="stylesheet">
13    <link rel="icon" type="image/png" href="images/favicon.png">
14  </head>
15<body>
16  <div id="news" class="big-bg">
17     <header class="page-header wrapper">
18        <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
19        <nav>
20            <ul class="main-nav">
21                <li><a href="news.html">News</a></li>
22                <li><a href="menu.html">Menu</a></li>
23                <li><a href="contact.html">Contact</a></li>
24            </ul>
25        </nav>
26     </header>
27      <div class="wrapper">
28        <h2 class="page-title">News</h2>
29     </div><!--.wrapper-->
30  </div><!--/#home -->
31
32 <div class="news-contents wrapper">
33     <article>
34    　　<header class="post-info">
35           <h2 class="post-title">店内のギャラリーの絵が新しくなりました</h2>
36           <p class="post-date">3/30　<span>2019</span></p>
37           <p class="post-cat">カテゴリー：お店の紹介</p>
38      　</header>
39     </article>
40
41   <aside>
42        サイドバー部分
43   </aside>
44 </div><!--/.news-content -->
45
46<!--フッター部-->
47<footer>
48   <div class="wrapper">
49       <p><small>&copy; 2019 Manabox <small></p>
50   </div>
51</footer>
52</body>
53

CSS
1@charset "UTF-8";
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/*header
17------------------------------------------------*/
18.logo {
19  width: 210px;
20  margin-top: 14px;
21}
22.main-nav {
23  display: flex;
24  font-size: 1.25rem;
25  text-transform: uppercase;
26  margin-top: 34px;
27  list-style: none;
28}
29.main-nav li {
30  margin-left: 36px;
31}
32.main-nav a {
33  color: #432;
34}
35.page-header {
36  display: flex;
37  justify-content: space-between;
38}
39.wrapper {
40  max-width: 1100px;
41  margin: 0 auto;
42  padding: 0 4%;
43}
44
45/* HOME
46---------------------------------------------*/
47.home-content{
48  text-align: center;
49  margin-top: 10%;
50}
51.home-content p {
52  font-size: 1.125rem;
53  margin: 10px 0 42px;
54}
55
56/*見出し*/
57.page-title {
58  font-size: 5rem;
59  font-family: 'Philosopher' , serif;
60  text-transform: uppercase;
61  font-weight: normal;
62}
63/*ボタン*/
64.button {
65  font-size: 1.375rem;
66  background: #0bd;
67  color: #fff;
68  border-radius: 5px;
69  padding: 18px 32px;
70}
71.button:hover {
72  background: #0090aa;
73}
74/*大きな画像背景*/
75.big-bg {
76  background-size: cover;
77  background-position: center top;
78}
79#home {
80  background-image: url(../images/main-bg.jpg);
81 min-height: 100vh
82}
83#home .page-title {
84  text-transform: none;
85}
86
87/*NEWS
88------------------------------*/
89#news {
90  background-image: url(../images/news-bg.jpg);
91  height: 270px;
92  margin-bottom: 40px;
93}
94#news .page-title {
95  text-align: center;
96}
97/*フッター
98-------------------------------*/
99footer {
100  background: #432;
101  text-align: center;
102  padding: 26px;
103}
104footer p {
105  color: #fff;
106  font-size: 0.875rem;
107}
108
109/*記事部分*/
110article {
111  width: 74%;
112}
113/*サイドバー*/
114aside {
115  width: 22%;
116}
117.news-contents {
118  display: flex;
119  justify-content: space-between;
120  margin-bottom: 50px;
121}
122
123.post-info {
124  position: relative;
125  padding-top: 4px;
126  margin-top: 40px;
127}
128.post-date {
129  background: #0bd;
130  border-radius: 50%;
131  color: #fff;
132  width: 100px;
133  height: 100px;
134  font-size: 1.625rem;
135  text-align: center;
136  position: absolute;
137  top: 0;
138  padding-top: 10px;
139}
140.post-date Span {
141  font-size: 1rem;
142  border-top: 1px rgba(255,255,255,.5) solid;
143  padding-top: 6px;
144  display: block;
145  width: 60%;
146  margin-top: 0 auto;
147}

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

回答1件

ベストアンサー

article部分の文字がサイドバー部分より下がっているのは、<article>と<header>の間に全角スペースがあるせいです。これはよくありがちなレイアウト崩れの原因なので気を付けてください。
それを除去してもなお下がっていますが、それは.post-infoにmargin-top: 40px;があるからですね。これは意図どおりなのでしょうか。

日付が左寄りなのは、これも3/30の右に全角スペースがあるせいです。
2019が左寄りなのは、.post-date Spanでdisplay: block; width: 60%;にしているので、それによるレイアウトの結果ですね。ここはどうしたいのか、わからないので、まずはご自分でレイアウトを考え直してみてください。

投稿2021/06/06 01:30