删除空白引导程序

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

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;
}

Answer 3

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;
}