css - ワードプレスのスタイリングに何か問題があります

Question

列グリッドのショートコードの作成が完了したばかりで、WordPress で正しく動作するようになりましたが、ショートコードを適用するたびに CSS に問題が発生します。

ここに私の問題の画像があります

http://i255.photobucket.com/albums/hh140/testament1234/font_zps75ea6335.png

これが私の functions.php のコードです

//Two Columns
function two_columns( $atts, $content = null ) {
return '<div id="responsive-image-container" class="two columns responsive-image-container"><div class="responsive-image">' . do_shortcode( $content ) . '</div></div>';
}
add_shortcode('grid_2', 'two_columns');

基本的に、投稿またはページに適用すると、[grid_2] ダミー テキスト [/grid_2] のようになります。私のスタイリングが最初の段落で機能しない理由はわかりませんが、2 番目と 3 番目の段落には何らかのスタイリングがあります。

Page.php

<?php get_header(); ?>


  <?php while ( have_posts() ) : the_post(); ?>

<div class="sixteen columns page-format">
       <h2 class="page-title"><?php the_title() ?></h2>
</div>

<div class="page-format">       
       <?php the_content(); ?>
</div>

    <?php endwhile; ?>



<?php get_footer(); ?>

ビュー ソースを確認したところ、最初の段落の開始 < p > タグと 2 番目の段落の < /p > タグが欠落しているようです

<div class="page-format">       
       <div id="responsive-image-container" class="sixteen columns responsive-image-container"><div class="responsive-image"><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lacinia blandit. Nam sodales eu metus a viverra. Aenean ac suscipit odio. Nullam ac dignissim neque, sed fringilla felis! Etiam egestas tellus sed posuere ultricies</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lacinia blandit. Nam sodales eu metus a viverra. Aenean ac suscipit odio. Nullam ac dignissim neque, sed fringilla felis! Etiam egestas tellus sed posuere ultricies<br />
</div></div>

<div class="clearfix"></div>