Css and function issue on author archive page

1) The messed up layout

It looks like you’re missing one closing </div> in your markup. Adding it on a line between <?php endif; ?> and <?php get_sidebar(); ?> should do the trick.

As a side note, you have h3 nested inside a h4 which is invalid markup.

2) Adding styling to your site

In WordPress the proper way of adding styles is to use the theme’s stylesheet instead of hard coding the style tags to your templates. So just remove the style tag from your template and move the css to your (child) theme’s styles.css file.

Do the same thing for the style tag that can be seen before the doctype declaration in your page source code.

You can read more about adding styles to your site here, https://developer.wordpress.org/themes/basics/including-css-javascript/#stylesheets

3) Comment count

In your loop you can use comments_number to “Display the language string for the number of comments the current post has.” Refer to the code reference to see the parameters you can pass to the function. For example,

<span class="comments"><?php comments_number(); ?></span>

4) Post tags

In your loop you can use the_tags() template function to display the post tags. This function too takes some parameters, which are described in the code reference.

<p><?php the_tags(); ?></p>

Or if you want to have more control on the tag output html, then you can use get_the_tags() instead in your loop. Simplified example,

$post_tags = get_the_tags(); 
if ( $post_tags ) {
  foreach( $post_tags as $tag ) {
    echo $tag->name . ', '; 
  }
}