title is indented and i don't know why

Question

On the footer of my posts I have a bottom border that also displays my comment count and social share buttons. I want the comment count to display left (and aligned with the front of the border) and I want the social button to display on the right. The social buttons are aligned with the end of the line, but for some reason the comment count is slightly indented on the left? Does anyone know why this is? Thanks in advance. I have attached a picture of what it looks like below.

I found this issue - thanks for the help

my single.php

<?php
get_header();
the_post_thumbnail('banner-image'); 
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
    
<?php wpb_set_post_views(get_the_ID()); ?>    
    <div class="post-info">    
    <h1 class="post-title"><?php the_title(); ?></h1>
   <h2 class="post-date"><?php echo strip_tags(get_the_term_list( $post->ID, 'location', 'Location: ', ', ', ' • ' ));?><?php the_date('F m, Y'); ?></h2>

    </div>
    <div class="post-content"><?php the_content(); ?></div>
    <div class="post-footer"><h1 class="post-footer-comment"><?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?></h1><div class="share"><span>share</span> <?php get_template_part( 'share-buttons-post' ); ?></div></div>
    <div class="post-footer-bloglovin"><h1>never miss a post</h1><h2><a href="#">subscribe to email</a></h2></div>
 <?php get_template_part( 'prevandnextpost' ); ?>

<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();
 
?>

the css

 .post-footer {
    border-bottom: 1px solid #000000;
    margin:40px 100px 0 100px;
    
max-width:1865px;
     display: block;
     overflow: hidden;
}
.post-footer-comment {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .2em;
    font-family: 'Lato', sans-serif;
    display: inline-block;
    float: left;
}
.post-footer-comment a:hover {
    color:#555555;
}
.share-buttons-post {
    letter-spacing: 10px;
    display: inline-block;
}
.share {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .2em;
    font-family: 'Lato', sans-serif;
    display: inline-block;
    float: right;
    margin-top:7px;
}
.share span {
    display: inline-block;
    position: relative;
    top:3px;
}

Answer 1

It appears that your comment count is inside of an h1 tag which inherently has margin, padding, etc. applied to it. You'll need to modify the class for that h1:

.post-footer-comment {
    margin-left: 0;
    padding-left: 0;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .2em;
    font-family: 'Lato', sans-serif;
    display: inline-block;
    float: left;
}

Semantically speaking, that's not a great use for an h1 tag. Since your footer content isn't inside of a section tag or anything that resets the context of headers, you're essentially stating that the footer text "X Comments" and later "never miss a post" are equally as important as your "post title" h1. You'd be better off to wrap that entire footer section inside of a footer tag if you want to reset the context of those h1's.

When your content is indexed by a search engine, or when it's read by a screen reader or other assistive device, the context is going to be odd. In the interest of building solid, semantic HTML structure, I would revisit those elements.

That said, to solve your problem, you can just remove the margin and padding on the target elements.