Wordpress Caption Formatting

Question

I'm trying to create a custom wordpress theme. Everything has gone fine, except image formatting in post content. Image captions are not displaying properly in newly created theme. I have already added wordpress core css as given below.

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

And I'm using following code to display my post content

<?php get_header(); ?>

<div class="row">

    <div class="col-md-8">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <p><em><?php the_time('l, F jS, Y'); ?></em></p>

        <?php $content = get_the_content(); ?>
        <div class="post-content img-responsive">
            <?php echo $content?>
        </div>

        <hr>
        <?php comments_template(); ?>
    <?php endwhile; else: ?>
        <p><?php _e('Sorry, this page does not exist'); ?></p>
    <?php endif; ?>
    </div>


    <div class="col-md-4">
        <?php get_sidebar(); ?>
    </div>
</div>

<?php get_footer(); ?>

It makes some captions properly. Still some captions are not arranged properly, they are dumped into screen as in wordpress editor. Images with caption are shown as given.

What should I do to display all post contents properly?

Answer 1

Don't know what was the actual problem. Using following syntax to display content solved problem.

<div>
    <h tag><?php the_title(); ?></h tag>
    .............other things like date and author
    <div>
         <?php the_content(); ?>
    </div>
</div>

Any way, thanks for everybody who tried to answer my question.