Wie kann ich ein div reaktionsschnell Weg, das ein Bild enthält

Ich bin derzeit auf der Entwicklung eines responsive wordpress-theme mit bootstrap-aber ich komme bei dem folgenden problem, dass ich habe drei div ' s nebeneinander mit einem vorgestellten Bild füllt die ganze div.

Dem vorgestellten Bild selbst ist schon responsive, aber für einige Grund mein div-Element nicht, es sei denn, ich benutze width: 33%; für den ersten und Dritten div, und die Breite: 34%; für das zweite div. Aber wenn ich das mache bekomme ich eine vertikale Linie auf der rechten Seite der Dritte div-1 pixel breit ist, wie diese Prozentsätze zusammen füllen nur 1039 Pixel zusammen anstelle von 1040 Pixel. Auch mit einem span4 Klasse auf die einzelnen div-funktioniert nicht, entweder wird es eine große Lücke auf der rechten Seite des Containers.

Also die Hülle ist 1040pixels breit und enthält drei div ' s. Und jedes div enthält ein featured image.

Was ich erreichen will ist, dass die drei Bilder, die bleiben neben einander beim skalieren und dass Sie nur schweben über einander auf die mobile version. Aber so wie es jetzt ist, Sie sofort unter einander, wenn die Seite skaliert.

Besuchen Sie die Website unter http://makramedia.beta-projects.nl und auf der homepage, wenn Sie nach unten scrollen sehen Sie die drei Bilder unter der Registerkarte Diashow.

Ich hoffe wirklich, dass mir jemand helfen kann, der auf diesem auf.
Vielen Dank im Voraus!

Your ' s sincerely,

Christiaan

Hier ist mein html markup:

<section id="project-section" class="row-fluid content" role="main">
    <?php global $query_string; //required ?>
    <?php query_posts('category_name=projecten&showposts=3&order=DESC'); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="project">
        <a href="<?php echo get_permalink(); ?>">
            <img class="project-icon" src="<?php bloginfo('template_directory') ?>/img/project-icon.png">
            <?php if ( has_post_thumbnail() ) {          
                the_post_thumbnail('projecten3-thumb', array( 'class' => "project-img"));
            } ?>
        </a>
    </div>
        <?php endwhile; else: ?>
            <p>There are currently no news items availlable.</p>
        <?php endif; ?>
        <?php wp_reset_query(); ?>
    <div class="clearfloat"></div>
</section>

Und hier ist mein CSS:

#project-section {
    position: relative;
    display: block;
    height: auto;
    max-width: 1040px;
    margin: 0;
    padding: 0;
    background: #111421;
    overflow: hidden !important;
}

.project {
    display: inline-block;
    position: relative;
    float: left;
    width: 100%;
    max-width: 347px;
    max-height: 213px;
    margin: 0;
    padding: 0;
    background: #afafaf;
    overflow: hidden;
}

    .project:nth-child(2) {
        max-width: 346px !important;
    }

.project-img {
    max-width: 100% !important;
    height: auto;
}

.project-icon {
    display: block;
    position: absolute;
    left: -35px;
    margin-top: 80px;
    margin-left: 50%;
    opacity: .8;
    /*transform*/
    -webkit-transform:scale(.9);
    -moz-transform:scale(.9);
    -ms-transform:scale(.9);
    -o-transform:scale(.9);
    transform:scale(.9);
    /*transition*/
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

    #project-section .project:hover .project-icon {
            opacity: 1;
            /*transform*/
            -webkit-transform:scale(1);
            -moz-transform:scale(1);
            -ms-transform:scale(1);
            -o-transform:scale(1);
            transform:scale(1);
            /*transition*/
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
    }