justify-content: space-between; 余白が反映されない

前提

一冊で身につくhtml&cssとwebデザイン入門講座という本で学習しています。
そこでFlex boxで横並びにはなったのですが、上下の余白がうまくいきません。
どのようにすれば解決できるかを教えてくださるとありがたいです。

実現したいこと

現在このようにずれてしまっている状態を↓

このようにヘッダーとフッターの間に余白を持たせたいです。↓

該当のソースコード

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

CSS
1@charset "UTF-8";
2
3/*-共通部分
4--------------------*/
5html {
6    font-size: 100%
7}
8body{
9    font-family: "Yu Gothic Midium", "遊ゴシック Midium", YuGothic, "遊ゴシック体", "ヒラギノ角ゴ pro W3", sans-serif;
10    line-height: 1.7;
11    color: #432;
12}
13a {
14    text-decoration: none;
15}
16img {
17    max-width: 100%;
18}
19/* HEADER
20--------------------*/
21.logo {
22    width: 210px;
23    margin-top: 14px;
24}
25
26.main-nav {
27   display: flex;
28   font-size: 1.25rem;
29   text-transform: uppercase;
30   margin-top: 34px;
31   list-style: none;
32}
33.main-nav li {
34    margin-left: 36px;
35}
36.main-nav a {
37    color: #432;
38}
39.main-nav a:hover {
40    color: #0bd;
41}
42.page-header {
43    display: flex;
44    justify-content: space-between;
45}
46.wrapper {
47    max-width: 1100px;
48    margin: 0 auto;
49    padding: 0 4%;
50}
51/* HOME
52--------------------*/
53.home-content {
54    text-align: center;
55    margin-top: 10%;
56}
57.home-content p {
58    font-size:  1.125rem;
59    margin: 10px 0 42px;
60}
61/* 見出し */
62.page-title {
63    font-size: 5rem;
64    font-family: 'Philosopher', serif;
65    text-transform: uppercase;
66    font-weight: normal;
67}
68/* ボタン */
69.button {
70    font-size: 1.375rem;
71    background: #0bd;
72    color: #fff;
73    border-radius: 5px;
74    padding: 18px 32px;
75}
76.button:hover {
77    background: #0090aa;
78}
79/* 大きな背景画像 */
80.big-bg {
81    background-size: cover;
82    background-position: center top;
83}
84#home {
85    background-image: url(../images/main-bg.jpg),linear-gradient(#c9ffbf,#ffafbd);
86    background-blend-mode: luminosity;
87    min-height: 100vh;
88}
89#home .page-title {
90    text-transform: none;
91}
92/* NEWS
93--------------------*/
94#news {
95    background-image: url(../images/news-bg.jpg);
96    height: 270px;
97    margin-bottom: 40px;
98}
99#news .page-title {
100    text-align: center;
101}
102/* フッター
103--------------------*/
104footer {
105    background: #432;
106    text-align: center;
107    padding: 26px 0;
108}
109footer p {
110    color: #fff;
111    font-size: 0.875rem;
112}
113
114/* 記事部分 */
115article {
116    width: 74%;
117}
118
119/* サイドバー */
120aside {
121    width: 22%;
122}
123.news-contents {
124    display: flex;
125    justify-content: space-between;
126    margin-bottom: 50px;
127}
128

試したこと

ネットで同じような事例がないか調べましたが見つけられませんでした。
最初から書き直したり、見本のHTMLやCSSをコピぺしてみても解決できませんでした。

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

回答2件

下記で#newsの高さを 270px にしていますが、それが原因では。中身の高さがそれ以上あるのでその分はみ出します。削除するかautoに設定すればどうでしょう。

css
1#news {
2    background-image: url(../images/news-bg.jpg);
3    height: 270px;
4    margin-bottom: 40px;
5}

投稿2023/02/25 13:29

hatena19

総合スコア34360

退会済みユーザー

2023/02/26 13:04

コメントありがとうございます！確かに height: 270px;を削除するとヘッダーとフッターの間にスペースができるようになりました! 説明が悪かったのですが、『店内ギャラリーの絵が…』の部分をヘッダーとフッターの間に表示させたく… 今回の修正では『店内ギャラリーの絵が…』の部分は動かなかったので、もう一度見直してみます。

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

ベストアンサー

すみません、解決しました…

HTML
1        <div class="news-contents wrapper">
2            <article>
3                <header class="post-info">
4                    <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>
5                    <p class="post-date">3/30 <span>2019</span></p>
6                    <p class="post-cut">カテゴリー：お店の紹介</p>
7                </header>
8                
9            </article>
10        
11            <aside>
12                サイドバー部分
13            </aside>
14        </div><!-- /.news-contents -->