オリジナルテンプレートのサイドバーが下の方に行ってしまします。

【質問】
サイドバーを11月30日の記事の横に表示したいのですが、なぜか一番下の記事の横についてしまいます。
どうすれば上手く表示出来るでしょうか？
お手数ですがよろしくお願いします。
https://datsumou-collection.jp/

php
1<section class="main front">
2  <div class="main-content row">
3    <?php if ( have_posts() ) : ?>
4      <?php while ( have_posts()) : the_post() ?>
5        <article class="article col-xs-12 col-sm-8">
6          <div class="article-box">
7            <time class="article-time">
8              <p><?php the_time('Y/m/d'); ?>(<?php the_modified_date('更新日:Y/m/d') ?>)</p>
9            </time>
10            <div class="article-ttl">
11              <h1><?php the_title();?></h1>
12            </div>
13            <div class="article-tag">
14              <?php the_category('');?>
15            </div>
16            <div class="article-thumbnail">
17              <?php the_post_thumbnail(''); ?>
18            </div>
19            <div class="article-detail">
20              <p><?php the_content();?></p>
21            </div>
22          </div>
23        </article>
24    <?php endwhile; ?>
25  <?php endif; ?>
26    <!-- サイドバー -->
27    <div class="aside col-xs-12 col-sm-4">
28      <div class="aside-content">
29        <div class="aside-banner">
30          <p>サイドメニュー</p>
31        </div>
32      </div>
33    </div>
34  </div>
35</section>
36

css
1.main .front {
2  background-color: #F7F7F7;
3  height: auto;
4}
5
6.main .front-content {
7  max-width: 1119px;
8  margin: 0 auto;
9}
10
11.article-time p {
12  text-align: center;
13  font-weight: bold;
14  margin-top: 26px;
15  margin-bottom: 0;
16}
17
18.main-content .article-box {
19  border: 1px solid #D1CCCC;
20  background-color: white;
21  margin-bottom: 20px;
22}
23
24.main-content .article-ttl {
25  margin: 22px;
26}
27
28.main-content .article-ttl h1 {
29  font-size: 25px;
30  font-weight: bold;
31  text-align: center;
32}
33
34.main-content .article-tag ul {
35  list-style: none;
36}
37
38.main-content .article-tag li {
39  text-align: center;
40}
41
42.main-content .article-tag a {
43  font-size: 18px;
44  font-weight: bold;
45  color: #00358F;
46}
47
48.article-thumbnail img {
49  max-width: 100%;
50  height: auto;
51  padding-top: 10px;
52}
53
54.article-detail {
55  margin: 0 40px;
56  font-size: 17px;
57}
58
59.aside {
60  display: block;
61}
62
63.aside-banner {
64  border: 1px solid #D1CCCC;
65  background-color: pink;
66  height: 500px;
67  margin: 0px auto 20px auto;
68}
69

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

回答2件

ベストアンサー

現状のHTMLの構成は下記のようになっています。

html
1<section class="main front">
2  <div class="main-content row">
3
4    <article class="article col-xs-12 col-sm-8">
5    </article>
6    <article class="article col-xs-12 col-sm-8">
7    </article>
8    <article class="article col-xs-12 col-sm-8">
9    </article>
10
11    <!-- サイドバー -->
12    <div class="aside col-xs-12 col-sm-4">
13    </div>
14  </div>
15</section>

article とサイドバー(aside)が同じブロック(.main-content)に入ってます。そのため、サイドバーが最後のarticleの横になります。

article とサイドバーは別のブロックにする必要があります。
また、それに合わせてBootStrapのクラス付けも変更する必要があります。

例えばHTMLが下記のようになるようにPHPを修正すればいいでしょう。

html
1<section class="main front row">
2
3  <div class="main-content col-xs-12 col-sm-8">
4    <article class="article">
5    </article>
6    <article class="article">
7    </article>
8    <article class="article">
9    </article>
10  </div>
11
12  <!-- サイドバー -->
13  <div class="aside col-xs-12 col-sm-4">
14  </div>
15
16</section>

css
1/* 以下削除
2.main .front {
3  background-color: #F7F7F7;
4  height: auto;
5}
6.main .front-content {
7  max-width: 1119px;
8  margin: 0 auto;
9} 
10*/
11/* 以下追加 */
12.main.front {
13  background-color: #F7F7F7;
14  height: auto;
15  max-width: 1119px;
16  margin: 0 auto;
17}