Custom Post Type adds extra html tags

Question

I have a custom post type called services but when displaying them, it is adding two extra <p> tags in the code for each post. I have no idea why.

This is the registration of the post type:

    function services_post_type() {
    $args = array(
        'labels'        => array(
                        'name' => __( 'Services', 'services' ),
                        'singular_name' => __( 'Service', 'service' ),
                        'menu_name' => 'Services',
                        ),
        'description'   => 'Add a service for your website.',
        'supports'      => array( 'title', 'editor', 'thumbnail' ),
        'public'        => true,
        'menu_position' => 5,
        'menu_icon'     => 'dashicons-text-page',
        'has_archive'   => true,
        'rewrite'       => array('slug' => 'services'),
    );
    register_post_type( 'services', $args );
}
add_action( 'init', 'services_post_type' );

This is the display of the post type:

<div class="row">
    <?php
    // The Query
    $query = new WP_Query(array('post_type' => 'services', 'order' => 'ASC'));
    query_posts( $query );

    // The Loop
    while ( $query->have_posts() ) : $query->the_post();
    ?>
    <div class="col-6">
        <h3 class="service-item-title"><?php the_title(); ?></h3>
        <p class="service-item-content"><?php the_content(); ?></p>
    </div>
    <?php
    endwhile;

    // Reset Query
    wp_reset_query();
    ?>
</div>

And this is what inspect shows: Inspect Screenshot

Answer 1

the_content() directly echoes all contents, including its HTML tags (which are often p tags), so you shouldn't put it into a p tag. If you need to add a class, use a DIV tag as a container for it:

<h3 class="service-item-title"><?php the_title(); ?></h3>
<div class="service-item-content">
  <?php the_content(); ?>
</div>