Google is not pairing my 'div' tags correctly (ending it early)

Question

I am coding a page for a custom WordPress theme and I am using PHP and Advanced Custom Fields to create the dynamic content for the page. All of my div tags have a start and an end to them but Google seems to be ending the div tag early by partnering it with the wrong end tag which is making my content look weird. Does anyone know why it is doing this and how to fix it?

I have already tried matching up all of my tags and I can't find one that isn't ended correctly so I'm at a loss as to what it could be.

Here is my code. I have tried to cut it down as much as I can but all of this is needed to see the Div pairing:

<div class="smaller-width center top">

    <div id="project-nav" class="title-section">
        <h1>Work.</h1>
        <nav id="project-filters">
        <button onClick="filterProj('All')" class="news-filter" ><p>All</p></button>
        <?php foreach($allCategories as $category) {
                        echo '<button onClick="filterProj('."'". $category->name ."'".')" class="news-filter" ><p>' .  $category->name . '</p></button>';
                } ?>

        </nav>
    </div>
    <div class="projcont full center">
        <div class="news-inner">

        <div class="clr"></div>

            <div id="projects-section">
                <?php               
                    foreach ($postslist as $post) :  setup_postdata($post); ?> 

                <?php if (has_post_thumbnail( $post->ID ) ):
                     $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); 
                ?>

                    <div class="project-post" data-categories="<?php 
                        foreach(wp_get_post_terms($post->ID, 'Project_Category', array("fields" => "all")) as $category) {
                            echo $category->name . ',';
                        } ?>">
                        <a class="single-project" href="<?php the_permalink() ?>">                        
                            <div class="project-inside" style="background-image: url( <?php echo $image[0]; ?>);"> 
                            </div>
                            <p>
                                <?php the_title(); ?><br>
                                <span id="tag">
                                    <?php foreach(wp_get_post_terms($post->ID, 'Project_Category', array("fields" => "all")) as $category) {
                                        echo $category->name . ' ';
                                    } ?>
                                </span>
                                <i class="fas fa-angle-right project-arrow"></i>
                            </p>  
                        </a>

                <?php endif; ?>               

                    </div>
                <?php endforeach; ?>
            </div>     
        </div>
        <div id="load"> 
            <button href="#" id="loadMore">VIEW MORE</button>
        </div>
    </div> 
</div>

Is there anything that sticks out here as to what might be breaking it?

Edit: Here is a screenshot of google ending my div early... As you can see, the last 2 project-post id's should be inside the project section

Answer 1

Formatting is your friend here. I have formatted your code in VS Code and I can see a little clearer what your issue is. The div you have between your ending if and for each statement is in the wrong place. I believe this is what is causing your issue.

<div class="smaller-width center top">
    <div id="project-nav" class="title-section">
        <h1>Work.</h1>
        <nav id="project-filters">
            <button onClick="filterProj('All')" class="news-filter" ><p>All</p></button>
            <?php foreach ($allCategories as $category) {
                echo '<button onClick="filterProj('."'". $category->name ."'".')" class="news-filter" ><p>' .  $category->name . '</p></button>';
            } ?>
        </nav>
    </div>
    <div class="projcont full center">
        <div class="news-inner">
            <div class="clr"></div>
                <div id="projects-section">
                    <?php foreach ($postslist as $post) :  setup_postdata($post); ?> 
                        <?php if (has_post_thumbnail($post->ID)):
                            $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'single-post-thumbnail');
                        ?>
                            <div class="project-post" 
                                data-categories="
                                    <?php
                                        foreach (wp_get_post_terms($post->ID, 'Project_Category', array("fields" => "all")) as $category) {
                                            echo $category->name . ',';
                                        } ?>">
                                <a class="single-project" href="<?php the_permalink() ?>">                        
                                    <div class="project-inside" style="background-image: url( <?php echo $image[0]; ?>);"></div>
                                    <p>
                                        <?php the_title(); ?><br>
                                        <span id="tag">
                                            <?php foreach (wp_get_post_terms($post->ID, 'Project_Category', array("fields" => "all")) as $category) {
                                            echo $category->name . ' ';
                                        } ?>
                                        </span>
                                        <i class="fas fa-angle-right project-arrow"></i>
                                    </p>  
                                </a>
                            </div>
                        <?php endif; ?>     
                    <?php endforeach; ?>          
                </div>
            </div>     
        </div>
        <div id="load"> 
            <button href="#" id="loadMore">VIEW MORE</button>
        </div>
    </div> 
</div>