マージンの幅をなくしたい

Question

「Beatle News」の右隣に「Live Schedule」を配置したいです。

<div id="main_content">にdisplay:flex;をつけましたが、<div id="section">についている マージンが邪魔してか、隣に配置されません。 <div id="section">に対して、margin-right:0;をつけてみましたが、だめです・・ そもそも隣に配置されない理由が、<div id="section">についているマージンが原因なのでしょうか お力添えください

今の状況↓

<div id="main_content">   
     <div id="content">　
        <?php query_posts ('showposts=2&cat=2');
          while(have_posts()):the_post(); ?>

       <div id="section">
          <div id="thumb">      
            <?php the_post_thumbnail(); ?>
       </div>
              
       <div id="desc">
          <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
          <?php the_excerpt(); ?>
       </div>
     </div>
         <?php endwhile; ?>


     <div id="sidebar">
      　<h2>Live Schedule</h2>
         <?php query_posts ('showposts=2&cat=4');
           while(have_posts()):the_post(); ?>
         <h3><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <?php the_excerpt(); ?></h3>
     </div>
         <?php endwhile; ?>
         
     </div>

#section {
	display: flex;
	width: 650px;
	flex:1;
}

#thumb {
	flex:1;
	margin-left: 1rem;
	max-width: 100%;
}

#desc {
	flex: 2;
	margin-left: 0;
}

#content {
	flex:3;
}

#main_content {
	display: flex;
}

Answer 1

追記　ちょっと丁寧に書き過ぎました。自力で解決されたようですが、
コードがちょいちょい非推奨と思われるので他の箇所も修正してみてくださいね。

---

ループの出力範囲がちょっと違うのかな？と思います。
一個目の<?php endwhile; ?>の位置を１行上の</div>と入れ替えつつ、
二個目の<?php endwhile; ?>の位置も同様に１行上の</div>と入れ替えてみるとどうなりますか？

以下のコードはご提示のコードをちょっと展開して簡略化してみたものなのですが、
id="content"の閉じタグが無くなるようです。
コード中のコメントアウトはおまけです。余裕があるようでしたら修正してみてくださいね。

<div id="main_content">   
    <div id="content">　

        <div id="section">
            <div id="thumb"></div><div id="desc"></div>
        </div><!-- section end -->
        
        <div id="section"><!-- ページ内での同じidは非推奨 -->
          <div id="thumb"></div><div id="desc"></div><!-- ページ内での同じidは非推奨 -->
        </div><!-- section end -->

        <div id="sidebar">
          <h2>Live Schedule</h2>
          <h3><h3></h3></h3><!-- hタグの中にhタグは非推奨 -->
        </div><!-- sidebar end -->

        <h3><h3></h3></h3><!-- hタグの中にhタグは非推奨 -->

    </div><!-- content end-->
</div><!-- main_content end -->

Comments

[isykzk]

ありがとうございます！
amiya-se様がおっしゃられる通り、ループの出力範囲を変えることで問題が解決したようです。
また、<h3><h3></h3></h3>の部分も修正しました。
ご丁寧にありがとうございました。
ても参考になりました。

[退会済みユーザー]

いえいえ、こちらこそご丁寧にありがとうございます。でももう一点だけ。
たしかidは同一ページ内に１つだけという決まりがあるはずなので、
重複しないようにclassに変更するか、
もしくは後ろに数字を付けてナンバリングしてあげた方が良いかもです。
おそらくclass派の人のほうが多いかもしれません。
ってことで、ここらで失礼しますー
ではではっ

[isykzk]

ええそうなんですね。
ご丁寧にありがとうございました！！

Answer 2

解決しました

<div id="main_content">  
        <div id="content">　
      	 <h2>Beatle News</h2>
        <?php query_posts ('showposts=2&cat=2');
          while(have_posts()):the_post(); ?>

       <div id="section">
          <div id="thumb">      
            <?php the_post_thumbnail(); ?>
          </div>
              
          <div id="desc">
           <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
           <?php the_excerpt(); ?>
          </div>
       </div>
         <?php endwhile; ?>
     </div>

     <div id="sidebar">
      　<h2>Live Schedule</h2>
        <hr>
         <?php query_posts ('showposts=3&cat=4');
           while(have_posts()):the_post(); ?>
         <h3><a href="<?php the_permalink(); ?>">
          <?php the_title(); ?></a></h3>
            <?php the_excerpt(); ?>
     
         <?php endwhile; ?>
      </div>
         
     </div>

#section {
	display: flex;
	width: 650px;
	flex:1;
}

#thumb {
	flex:1;
	margin-left: 1rem;
	max-width: 100%;
}

#desc {
	flex: 2;
	margin-left: 0;
}

#content {
	flex:2;
}

#sidebar {
	flex:1;
	flex-direction: column;
}

#main_content {
	display: flex;
}

h3 {
	margin-left: 30px;
	margin-top: 0;