WordPress ) display flexを使用すると謎の余白ができる
display flexを使用するとできる謎の余白を消したい
プログラミング勉強中の者です。
WordPressで最新記事の投稿ページを作成中で、
記事を横並びで投稿したいのですが、
display flex;
を使用すると、左側に謎の余白ができてしまいます。
padding,marginでもなく、原因がわからず消せずに困っています。
どなたか分かる方、原因と解決方法のご教示の程、
宜しくお願い致します。
発生している問題・エラー
↓container css
↓display flex使用前
↓display flex使用前２
↓display flex使用後
↓padding 位置
該当するソースコード
<?php get_header(); ?>
<div class="Mytop">
<div class="Mytop_item"></div>
</div>
<h2 class = "Newtopic">最新情報<span>NEWS</span></h2>
<main>
<div class = "container">
<div class="Top">
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<!-- 記事-->
<div class="contents">
<article id = "post-<?php the_ID(); ?>" <?php post_class('news'); ?>>
<!-- アイキャッチ画像-->
<div class="news_pic">
<a href="<?php the_permalink(); ?>">
<?php if (has_post_thumbnail()): ?>
<?php the_post_thumbnail('medium'); ?>
<?php else: ?>
<img src = "<?php echo get_template_directory_uri(); ?>/picture/noimage_600x400.png" alt="">
<?php endif; ?>
</a>
</div>
<!-- カテゴリー-->
<div class="news_meta">
<?php the_category(); ?>
<!-- 投稿日時-->
<time class="news_time" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日'); ?></time>
</div>
<!-- タイトル-->
<h2 class="news_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<!-- 内容-->
<div class="news_desc">
<?php the_excerpt(); ?>
<p><a href="<?php the_permalink(); ?>">[続きを読む]</a></p>
</div>
</article>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</main>
<?php get_footer(); ?>
該当するソースコード
/* メイン */
main {
width: 100%;
}
/* 投稿記事 */
.Top{
width: 100%;
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contents{
flex: 0 0 30%;
max-width: 30%;
padding-right: 15px;
padding-left: 15px;
}
.news {
width: 100%;
margin-bottom: 30px;
}
.news .news_pic {
margin-bottom: 10px;
}
.news .news_pic img {
height: auto;
max-width: 100%;
display: block;
}
説明不足な点、不明点がございましたら、
そちらも教えていただけますと助かります。
ご教示よろしくお願い申し上げます。
0 likes