Module alignment in gkMainbodyTop

I am trying to put 3 modules side-by-side in gkMainbodyTop. They each have a small text and a background image. I want them to expand to fill the position. I put this code into override.css, and then used vmmod as a suffix for the modules:

Code: Select all

.vmmod  {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
   display: inline-block;
   width: 33%;
   height: 400px;
   margin: 0 5px 0 5px;
}

The html in the modules is as follows:

Code: Select all

<p style="text-align: center;"><a href="index.php/en/mens/jeans-3"><span style="font-size: 24pt; border: thin solid #666666; overflow: hidden;">SHOP JEANS</span></a>
</p>

The page is here:
http://www.dev.ficcionesmedia.com/abrec ... hp/en/mens
As you can see there are two problems. The 3 modules are not fitting inline. And the text is not filling each module.
Can you help?
I am using MetaModPro to filter by vm category, but this should inherit the class of the modules in it.

Hello,

Please add the following class for the gkMainbodyTop block: gkCols3, then please add the following suffix for the all modules which should be with the 3-column layout: gkmod-3.

Thank you dziudek, I did exactly what you said and it works!
But I need to add height and margin to the modules.
I did this by deleting everything except height and margin from vmmod (above) and adding vmmod to the suffix. The height works fine, but the margin makes the 3 modules go on to 2 rows. Can you help again?
I have also tried adding this to override.css:

Code: Select all

.gkmod-3 {
   height: 400px;
   margin: 0 5px 0 5px;
}

but it is the same.

I have not found the css for gkmod-3 anywhere. Where is it?

Thank you once again for your excellent help.

Please try to add the following CSS code:

Code: Select all

#gkMainbodyTop .box.gkmod-3 {
width: 31.333333%;
margin: 0 1%;
}