<aside>タグ　要素を右寄せにしたい

###<aside>タグについて。要素を右寄せしたい。

前提

<aside>タグを入れて写真の様に右寄せしたいのですがなぜだか上手く出来ません。 <aside>が<section>タグの下のままで右に移動しません

##HTMLコード##

<body>

 <div id="container" class="wrapper">
      <main>
        <article>
          <h2 class="article-title"><a href="#">タイトルテキストテキストテキストテキストテキスト</a></h2>
          <ul class="meta">
            <li><a href="#">2020/01/01</a></li>
            <li><a href="#">カテゴリ1</a></li>
          </ul>
          <a href="#"><img src="img/main1.jpg" alt="テキストテキストテキスト"></a>
          <p class="text">
            本文テキストテキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキストテキストテキスト
          </p>
          <div class="readmore"><a href="#">READ MORE</a></div>
        </article>
        </main>

<aside id="sidebar">
        <section class="author">
          <img src="img/author.jpg" alt="テキストテキストテキスト">
          <h3 class="side-title">Name Name</h3>
          <p class="profile">
            プロフィールテキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキストテキストテキストテキスト
          </p>
        </section>
</body>

##cssコード##

#container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
main {
  width: 65%;
}
main article {
  margin-bottom: 80px;
}
main .article-title {
  font-size: 1.5rem;
  margin: 10px 0 15px 0;
}
main ul {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}
main li {
  font-size: 0.875rem;
  margin-right: 20px;
}
main .text {
  padding: 10px 40px 30px 40px;
}

#sidebar {
  width: 33%;
  padding: 20px;
}
#sidebar .side-title {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 30px;
}
.author {
  text-align: center;
  margin-bottom: 60px;
}
.author img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin-bottom: 30px;
}
.author .profile {
  font-size: 0.875rem;
  text-align: left;
}

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-09/ed74b06f-871d-4795-bf42-278e9035b37d.png)

Nucle_Cat

2023/10/09 10:04

記述内容にたりないものがたくさんあります。 header、main、サイドバー用のaside、footerの位置関係を表す部分のcss headerとmainとサイドバー用のasideとfooterの一番外側のタグをいれたhtml(中の細かい部品は理解の邪魔なのでレイアウトができるまで含めないほうが早い)、これらだけでまずは組み立てて、なんなら枠線もつけて色分けして位置関係が合うまでなんべんも試してから、中の部品を入れ込んでいったほうが早く学習できると思います。

shunpei0896

2023/10/09 14:01

ごめんなさい長くなってしまうと思ったので結構省略してしまってます。

m.ts10806

2023/10/10 01:33

ひとまず質問は編集で他者がコピペで再現できる程度に提示しましょう。

shunpei0896

2023/10/10 10:31

はい！

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

回答1件

ベストアンサー

気を付けたいところ

開いたタグは必ず閉じる（頭とおしりは二つで１セット）
インデントするなら正確にインデントしないと、そのタグの深さが逆にわかりにくいです。

学習の助けになれば幸いです

htmlタグが開きっぱなしで閉じていない箇所があるようです。
先のコメントにも記載しましたが、最初に、枠部分だけで組み、
作りたいレイアウトに近づけてから、中身を一つ足したら表示を確認するように一歩一歩作業すると、
間違えたときに直す場所がわかりやすく、理解も進むと思います。

枠だけの練習例を添えます。
htmlタグの中にhtmlタグをいれるとき、おしりを消したりしないように注意しつつ、
いろいろ実験してみてください。
また、必要な閉じタグが無いときにどう崩れるかも試すと、より理解しやすいと思います。

html
1<html>
2  <head>
3    <style>
4    #container {
5      display   flex;
6      justify-content   space-between;
7      border   1px solid red;
8    }
9    #container > *{ box-sizing   border-box;}
10    #main_content {
11      width   65%;
12      border   1px solid blue; background   #99f;
13    }
14    #sidebar {
15      width   33%;
16      padding   20px;
17      border   1px solid green; background   #9f9;
18    }
19    </style>
20  </head>
21  <body>
22    <div id="container" class="wrapper">
23      <main id="main_content">
24        <article class="article-title">
25          <h2>articleの中身は省略</h2>
26        </article>
27      </main><!--/ #main_content-->
28      <aside id="sidebar">
29        <section class="author">
30          <h3>サイドバーの中身も省略</h3>
31        </section>
32      </aside><!--/ #sidebar-->
33    </div><!--/ #container-->
34  </body>
35</html>