Gallery CSS Problem

Question

Right now I'm using a code in the functions to override the default WordPress gallery CSS. But it seems for some reason that WP only wants to let me put 3 images per line in a gallery, despite my CSS. Anybody know how to fix this? My problem can be found here -> http://themeforward.com/demo2/features/gallery-2/ and my CSS is below.

/*//////////////////////////////////////////////////////////////////// 
//  Gallery
////////////////////////////////////////////////////////////////////*/
.gallery {
margin:30px 0 auto!important;
text-align:center;
width:680px;
overflow:hidden;
background:#1a1a1a
}
.gallery-item {
float:left;
text-align:center;

background:#000
}
.gallery img {
display:inline
}
.gallery img:active {
}
.gallery-caption {
display:none;
font-size:.8em;
margin-left:0
}
.gal_img {
margin:20px auto 0!important;
text-align:center
}
.gal_caption p {
font-size:1.3em!important;
font-weight:640;
text-align:center;
font-family:Arial, Helvetica, sans-serif!important
}
.gal_description p {
font-size:1.1em!important;
text-align:center
}

EDIT:

//////////////////////////////////////// Gallery
add_filter('gallery_style',
    create_function(
        '$css',
        'return preg_replace("#<style type=\'text/css\'>(.*?)</style>#s", "", $css);'
        )
    );

//////////////////////////////////////// Remove default gallery styling
add_filter( 'use_default_gallery_style', '__return_false' );

Answer 1

You have to account for all appropriate CSS classes, based on the number of columns passed to the shortcode. Here's my CSS (borrowed heavily from Michael Fields), for handling from 1 to 10 columns:

.gallery {
    margin: 0px auto;
    text-align: center;
    width: 100%;
    min-width: 100%;
}
.gallery .gallery-item {
    float: left;
    margin: 0px auto;
    text-align: center;
}
.gallery img {
    border: 1px solid #cfcfcf;
}
.gallery .gallery-caption {
    display: none;
}
.gallery-columns-1 .gallery-item {
    max-width: 638px;
    width: 638px;
}
.gallery-columns-1 .gallery-item img { 
    max-width: 600px;
    height: auto;
    max-height: 600px;
}
.gallery-columns-2 .gallery-item {
    max-width: 300px;
    width: 300px;
}
.gallery-columns-2 .gallery-item img { 
    max-width: 300px;
    height: auto;
    max-height: 300px;
}
.gallery-columns-3 .gallery-item {
    max-width: 200px;
    width: 200px;
}
.gallery-columns-3 .gallery-item img { 
    max-width: 200px;
    height: auto;
    max-height: 200px;
}
.gallery-columns-4 .gallery-item {
    max-width: 151px;
    width: 151px;
}
.gallery-columns-4 .gallery-item img { 
    max-width: 150px;
    height: auto;
    max-height: 150px;
}
.gallery-columns-5 .gallery-item {
    max-width: 120px;
    width: 120px;
}
.gallery-columns-5 .gallery-item img { 
    max-width: 120px;
    height: auto;
    max-height: 120px;
}
.gallery-columns-6 .gallery-item {
    max-width: 100px;
    width: 100px;
}
.gallery-columns-6 .gallery-item img { 
    max-width: 100px;
    height: auto;
    max-height: 100px;
}
.gallery-columns-7 .gallery-item {
    max-width: 85px;
    width: 85px;
}
.gallery-columns-7 .gallery-item img { 
    max-width: 85px;
    height: auto;
    max-height: 85px;
}
.gallery-columns-8 .gallery-item {
    max-width: 75px;
    width: 75px;
}
.gallery-columns-8 .gallery-item img { 
    max-width: 75px;
    height: auto;
    max-height: 75px;
}
.gallery-columns-9 .gallery-item {
    max-width: 67px;
    width: 67px;
}
.gallery-columns-9 .gallery-item img { 
    max-width: 67px;
    height: auto;
    max-height: 67px;
}
.gallery-columns-10 .gallery-item {
    max-width: 60px;
    width: 60px;
}
.gallery-columns-10 .gallery-item img { 
    max-width: 60px;
    height: auto;
    max-height: 60px;
}

EDIT

Here you can see an example of the markup and styles being applied, from calling the following in the Post Content:

[gallery columns="1"]
[gallery columns="2"]
[gallery columns="3"]
[gallery columns="4"]
[gallery columns="5"]
[gallery columns="6"]
[gallery columns="7"]
[gallery columns="8"]
[gallery columns="9"]
[gallery columns="10"]