２カラム表示ずれてしまいます

2カラム表示をcontainer幅内で行いたいのですが、うまくできません。
コード内のメインエリア部分をarticleの真ん中、
サイドバー部分をasideの真ん中に配置したいのですが、
ずれてしまいます。
２カラムレイアウトは、containerの中に入れてはいけないのでしょうか。

試してみた作業としては、containerをとってみましたが、
その場合も、メインエリア部分の文言が左詰状態になりました。

以下、作成コードとなります。
ご回答をいただければ幸いです。
よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>●○○○○●○○○○●○○○○</title>
6        <link rel="stylesheet" href="style.css">
7    </head>
8    <body>
9        <div class="top-wrapper">
10            <div class="container">
11                <div class="header-left">
12                    <img class="logo" src="●○○○○●○○○○●○○○○">
13                </div>
14                <div class="header-right">
15                    <a>NEWS</a>
16                    <a>MENU</a>
17                    <a>CONTACT</a>
18                </div>
19                <div class="top-title">
20                    <h1>NEWS</h1>
21                </div>
22            </div>
23        </div>
24        <div class="news-contents wrapper">
25            <div class="container">
26                <article>
27                    メインエリア部分
28                </article>
29            
30                <aside>
31                    サイドバー部分
32                </aside>
33            </div>
34        </div>
35        <footer>
36            <div class="container">
37                <p><small>&copy; 2020 testCopy</small></p>
38            </div>
39        </footer>
40    </body>
41</html>

CSS
1body {
2    margin: 0;
3    font-family: "Hiragino Mincho ProN";
4}
5a {
6    text-decoration: none;
7}
8.container {
9    width: 1170px;
10    margin: 0 auto;
11}
12.top-wrapper {
13    height: 400px;
14    text-align: center;
15    background-image: url(●○○○○.jpeg);
16    background-size: cover;
17}
18.header-left {
19    float: left;
20}
21.logo {
22    width: 100px;
23    padding-top: 20px;
24}
25.header-right {
26    float: right;
27    padding-top: 90px;
28}
29.header-right a {
30    font-size: 14px;
31    letter-spacing: 5px;
32    color: dimgrey;
33    padding-left: 50px;
34}
35.top-title h1 {
36    font-size: 42px;
37    letter-spacing: 8px;
38    font-weight: normal;
39    padding-top: 180px;
40}
41.news-contents {
42    display: flex;
43    justify-content: space-between;
44    text-align: center;
45}
46article {
47    width: 74%;
48}
49aside {
50    width: 22%;
51}
52footer {
53    height: 80px;
54    background-color: #f2f2f2;
55}
56footer p {
57    line-height: 80px;
58    letter-spacing: 5px;
59    color: dimgrey;
60    text-align: center;
61    font-size: 12px;
62}
63

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

回答1件

ベストアンサー

css
1.news-contents {
2    display: flex;
3    justify-content: space-between;
4    text-align: center;
5}
6article {
7    width: 74%;
8}
9aside {
10    width: 22%;
11}

この、display: flex; で article と aside を2カラムに表示しているつもりだとしたら、間違いです。
flex は子要素のアイテムを横並べさせるものですが、article と aside は孫要素ですので横並びにはなりません。

article と aside の直接の親要素にdisplay: flex;を設定しましょう。

css
1.news-contents > .container {
2    display: flex;
3    justify-content: space-between;
4    text-align: center;
5}

投稿2020/08/11 04:36

hatena19

総合スコア33715

user20

2020/08/11 04:48

hatena19 様ご回答ありがとうございました。解決いたしました。いつもありがとうございます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

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

２カラム表示ずれてしまいます

関連した質問