I've made some progress in resolving the issues. Posts are now loading in the correct order with one exception: Post number 3 loads twice, the first instance in the right position, and the second instance between post 7 and 8. Why is this happening?
I also still have a lot of unknown white space in the first post that shouldn't be there.
Here is my updated index.php
<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="content">
<?php while (have_posts()) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;
?>
<?php //else : ?>
<?php //endif; ?>
</div>
</div>
<?php get_footer(); ?>
Here is my updated content.php
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="time-and-date">
<div class="post-date"><span class="date-icon">#</span><?php the_time( 'l, F j, Y' ); ?></div>
<div class="post-time"><?php the_time( 'h:i A, T' ); ?><span class="time-icon">&</span></div>
</div>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<div class="post-title">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
<div class="post-content">
<div class="post-tags">Posted in: <?php the_category(' '); ?> <?php the_tags( 'and tagged: ', ', ', '.'); ?></div>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
</div>
<div class="post-meta"><span class="meta-links"><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php //the_title_attribute(); ?>">Permalink</a> | <a href="<?php //comments_link(); ?>">Comments</a> | <a href="http://www.addthis.com/bookmark.php" target="_blank">Share</a></span><br/>
</div>
</div>
Please help?