[Plugin: Custom Post Type UI] Custom Posts stack on top of each other. Put in a horizontal row?

I know how to use CSS to float things left and therefore have them fall into a horizontal line, but it’s not working. There’s obviously something I need to override in the plugin. Here’s what’s going on:

With the Custom Post Type UI plugin, I have created a Custom Post Type called “Projects”. I have a few “Project” posts now. All of them sit together within a 1000px-wide wrapper on a template page.

Each custom post is 277px x 277px. In my CSS, I can control the posts by adding styles to the element .type-projects. When that element is floated left, in theory all the posts should line right up. But they don’t.

***** APPROACH #1: *****

I styled the element containing the post like this:

.type-projects {
border: 15px solid #3B555A;
width:277px;
height:277px;
margin:20px 20px 20px 0;
float:left;
}

***** RESULT *****
The border shows, and the post is inside, so the custom posts respond to the styling. But floating this element to the left did nothing.

So I tried:

***** APPROACH #2 *****

I went into the WordPress dashboard. With the plugin, I had created the Custom Post Type “projects”. I clicked one of the projects. Where you add the content (under the title) when creating a “project”, I went into html view and created:

<div class=”customPostWrap”>
content
</div>

Then in my CSS, I targeted that DIV like so:

.customPostWrap {
float:left;
margin:0;
padding:20px;
background-color:blue;
width: 400px;
}

***** RESULT *****

Again, I can see that the element exists on my template page. I can change the padding and it moves around, etc. But now all the “customPostWraps” stack above each other. Help!