Displaying a custom post type using get_template_part into a specific layout

Question

I am new to wordpress custom themes and am trying to recreate this website (http://www.divecarib.com/) as practice. I am trying to find the correct way to achieve the following:

I have created a custom post type called feature. I am using the get_template_part function to call the title and the content of this post type in my front-page.php. ("Feature" is basically one of the 3 service highlights on the front page of the website mentioned above)

I want these features arranged into 3 list items that are horizontally aligned just like the above website. Each list item contains a div that holds the h2 and p tag for the heading and content respectively. The UL sits inside an article.

Currently I have been able to achieve the layout I wanted, but when inspecting the code with chrome tools, I see several things that are off. First of all, instead of getting 3 LIs inside one UL, I have the parent article being repeated 3 times resulting in 3 ULs with only 1 LI in each. It LOOKS the same on the web, but it presents issues. The parent elements no longer wrap the children as they did before (prior to implementing this structure in the php files, I placed the html in the wordpress admin area and used get_content(); and it all worked.) I am using the exact same stylesheet with no changes so I expected things to look the same, but I cannot apply the background color to the article now because it doesn't wrap the children.

In addition there are empty p tags before and after the actual p tag that holds the post type content.

Thank you for the help current code is below.

front-page.php

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

        <h1><?php  the_title();?></h1>

        <?php
        $args = array(
            'post_type' => 'feature',
            'posts_per_page' => 3
            );

        $loop = new WP_Query($args);

        if ( $loop -> have_posts() ) :

            /* Start the Loop */
            while ( $loop -> have_posts() ) : $loop -> the_post();

                /*
                 * Include the Post-Format-specific template for the content.
                 * If you want to override this in a child theme, then include a file
                 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                 */
                //get_template_part( 'template-parts/content', get_post_format() );
                ?>
                <?php  get_template_part( 'template-parts/content', 'feature' );

                 ?>

                <?php  

            endwhile;

            //the_posts_navigation();

        else :

            //get_template_part( 'template-parts/content', 'none' );

        endif; ?>

        wp_reset_postdata();

    </main><!-- #main -->
</div><!-- #primary -->

content-feature.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<ul>
    <li>
        <div>
            <h2><?php the_title(); ?></h2>
            <p><?php the_content(); ?></p>
        </div>
    </li>
</ul>

style.css

    #page{
    background-image: url('../../../wp-includes/images/mainImage.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
}
#content{
    margin:0 auto;
    max-width:980px;
}
#primary{
    max-width: 742px;
    margin: auto 72px auto auto;
}

main h1{
    text-align: center;
    color: white;
    font-weight: bold;
}

main ul li{
    list-style: none;
    max-width: 215px;
    display: inline-block;
    text-align: left;
    margin: 0 10px;
    line-height: 100%;
    color: #26729B;
    float:left;

}

main ul li p{
    font-family:Arial;
    font-size: 14px;
}

main ul li h2{
    line-height: 120%;
    font-weight: bold;
    font-size: 1.6em;

}
main ul{
    text-align: center;
    padding: 0px;
    margin: 0 auto;
}

main > div > p{
    text-align: center;
    padding:0px 0px 15px 0px;
    margin:0px;
    color: #434A52;
    font-size: 36px;
}

main > article {
    background-color: rgba(255, 255, 255, 0.66);
    padding:0px;
}

Image showing extra p tags:

Answer 1

Whatever you have in content-feature.php is going to be repeated for each article/post/feature. If you want all of them to be within the same <ul> you'll need to put everything else outside into the front-page.php main template. So:

front-page.php

if ( $loop -> have_posts() ) : ?>
     <ul>

       <?php /* Start the Loop */
        while ( $loop -> have_posts() ) : $loop -> the_post();
            get_template_part( 'template-parts/content', 'feature' ); ?>


  <?php endwhile;
     </ul>
        //the_posts_navigation();

content-feature.php

<li>
    <div>
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>
    </div>
</li>

The only thing with this is if you want to preserve the <article> tag, you may need to swap it out for the <div> inside your loop. It's just a matter of structuring your html so that the repeating parts are inside the loop and the non-repeating parts are outside.