Inline-Table under TwentyTwelve not working

Question

I recently wanted to add a comfortable way to automatically add users to a page within small boxes including information an an image. So I followed this tutorial an customized the code: http://www.wpbeginner.com/wp-tutorials/how-to-display-an-author-list-with-avatars-in-wordpress-contributors-page/

On the active page, which is using a horribly old and annoying framework by Pagelines, this works just fine. The elements are aligning just the way they should. (http://www.dreadfactory.de/testseite/)

But when I try to add excatly the same code to a simple page with a twentyTwelve Childtheme, the layout is messed up. It has to be some problem with the TwentyTwelve css, because when I remove the TwentyTwelve css import, the boxes are fine (But of course then the rest is messed up. ;) )

You can see how the code takes effect in TwentyTwelve here: http://it.marvin-pollock.com/test

Edit 1: Added page code

The page template so far is very simple:

<?php
/*
Template Name: Profilseite
*/
?>
<?php get_header(); ?>

    <div id="primary" class="site-content" style="width: 100%">
        <div id="content" role="main" >
                <div id="authorlist"><ul><?php contributors(); ?></ul></div>
        </div><!-- #content -->
    </div><!-- #primary -->
<?php get_footer(); ?>

The code in functions.php

// --- Creates List of Users (Needs Plugin "user Photo") --- //
// --- To exclude a Profile set display_name = inactive --- //
function contributors() {
    global $wpdb;

    $authors = $wpdb->get_results("SELECT ID, user_nicename from $wpdb->users WHERE display_name <> 'admin' AND display_name <> 'inactive' ORDER BY display_name");

    foreach ($authors as $author ) {
            echo "<li>";
                echo "<a href='";
                the_author_meta('user_url', $author->ID);
                echo "'>";
                echo userphoto($author->ID);
                echo "</a>";
                echo '<div>';
                    echo "<a href='";
                    the_author_meta('user_url', $author->ID);
                    echo "'>";
                        echo "<h3>";
                        the_author_meta('first_name', $author->ID);
                        echo "</h3>";
                    echo "</a>";
                    echo "<a href='";
                    the_author_meta('user_url', $author->ID);
                    echo "'>";
                        echo "<h3>(";
                        the_author_meta('last_name', $author->ID); //TODO: Change to 'city'
                        echo ")</h3>";
                    echo "</a>";
                    echo "<br />";
                    echo "<p>";
                        the_author_meta('description', $author->ID);
                    echo "</p>";
                    echo "<br />";
                    echo "<a href='";
                    the_author_meta('user_url', $author->ID);
                    echo "'>";
                        echo "Termine und Kontakt ->";
                    echo "</a>";                
                echo "</div>";
            echo "</li>";
    }
} 

Answer 1

It's because the TwentyTwelve theme has "clear: both;" set on H3 tags, which messes up the layout.

Try adding this CSS:

#authorlist h3 {
    clear: none !important;
}