Removing white space bootstrap

Question

I am trying to remove the white space that is between my tiles like the picture below:

This is what I currently have :

Here is the mark up for the second picture which is currently what I have in place :

CSS

 .mainbody-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }

        /* Overlay text */
    .module {
        background-color: lightgray;
        background-attachment: fixed;
        /*width: 400px;*/
        height: 300px;
        position: relative;
        overflow: hidden;
        margin: 20px;
    }

        .module > header {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px 10px;
            background: inherit;
            background-attachment: fixed;
            overflow: hidden;
        }

            .module > header::before {
                content: "";
                position: absolute;
                top: -20px;
                left: 0;
                width: 200%;
                height: 200%;
                background: inherit;
                background-attachment: fixed;
                -webkit-filter: blur(4px);
                filter: blur(4px);
            }

            .module > header::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.25);
            }

            .module > header > h1 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

            .module > header > h2 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

    * {
        box-sizing: border-box;
    }

HTML

<div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;">
<div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
        <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
         <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
         <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
</div>

Can someone please advice me on a way to remove all the white space between the tiles?

Thanks

Answer 1

 .mainbody-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }
.newClass{
        background-color: lightgray;
        padding: 0px!important;
        margin:0px!important;
}
.red{
    background-color: red!important;
}
        /* Overlay text */
    .module {
        background-color: #abc;
        background-attachment: fixed;
        /*width: 400px;*/
        height: 300px;
        position: relative;
        overflow: hidden;
    }

        .module > header {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px 10px;
            background: inherit;
            background-attachment: fixed;
            overflow: hidden;
        }

            .module > header::before {
                content: "";
                position: absolute;
                top: -20px;
                left: 0;
                width: 200%;
                height: 200%;
                background: inherit;
                background-attachment: fixed;
                -webkit-filter: blur(4px);
                filter: blur(4px);
            }

            .module > header::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.25);
            }

            .module > header > h1 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

            .module > header > h2 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

    * {
        box-sizing: border-box;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;">
<div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass">
        <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass">
         <div class="module red">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass">
         <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
</div>

http://jsfiddle.net/qbo8pk8j/3/

Answer 2

there is padding on your col divs and there is margins in your module divs. see demo: http://jsfiddle.net/swm53ran/347/

.myClass {
    padding: 0px;
}
.myClass .module {
    margin: 0px;
    outline: 1px solid black;
}

Answer 3

Here is fiddle: http://jsfiddle.net/q5yfcs2p/

I removed margin in .module and add custom class for col-*-* because bootstrap has paddings on his sides. This .no-padding class removes left and right.

.no-padding {
   padding-left: 0;
   padding-right: 0;
}