我希望col-md

Question

Just like this

所以，我对填充的背景有问题。 问题是填充是打开的，但为什么它仍然有空间的背景..看看我的图像，了解我所说的。 我希望填充之间的空间就像普通的bootstrap一样

我想念一下吗？因为通常它不是这样的..

*对不起我的英语顺便说一句。

/* STAT OF JOBNYA */
.row#jobnya{
    margin-top: 20px;
    margin-bottom: 20px;
/*    padding-top: 20px;*/
    border-radius: 3px !important;
    border: solid 0.5px rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.1);
    padding-bottom: 10px;
    background: #fff;
}


.row#jobnya:hover{
        -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
            transition: all 0.3s;
}
.col-sm-12{
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 10px;
}
/*.gambar{
    padding-left: 10px;
    padding-right: 10px;
}*/

.gambar img{
    width: 100%;
    height: 200px;
    border: 0;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
border-radius: 4px;
}

.judul{
    margin: 0px !important;
    word-wrap: break-word !important;
    font-size: 22px !important;
    line-height: 22px !important;
    letter-spacing: undefined !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    color: #484848 !important;
    font-weight: 700 !important;
}
.available-job{
  /*  background: #FFDDF5;*/
    background: #f9f9f9;
    color: #484848;
    text-align: center;
    padding: 10px;
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    font-weight: 300 !important;
}
.posted{
word-wrap: break-word !important;
padding: 5px 0;
font-size: 15px !important;
line-height: 18px !important;
letter-spacing: 0.2px !important;
font-weight: 400 !important;
color: rgba(0,0,0,.54) !important;
}
.harga, .tanggal{
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    color: #484848 !important;
    font-weight: 300 !important;
/*    display: inline-block !important;*/
    padding: 15px 0;
    margin-right: 15px
}

 .tempat{
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding-top: 5px !important;
    padding-bottom: 0px !important;
    color: #484848 !important;
    font-weight: 300 !important;
    padding: 15px 0;
    }

.kategori{
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding-top: 10px !important;
    padding-bottom: 0px !important;
    color: #484848 !important;
    font-weight: 300 !important;
    padding: 15px 0;
}
.kategori span{
        background: #f9f9f9 !important;
        border-radius: 4px;
        border: 1px solid #e9e6e0;
        padding: 2px;
        display: inline-block;
}

.tombol{
    text-align: right;
    padding-right: 30px;
}

.tombol a.detail{
    text-transform: uppercase;
    cursor: pointer !important;
    background: #FF5C5C;
    color: #fff;
    position: relative !important;
    /*display: inline-block !important;*/
    text-align: center !important;
    text-decoration: none !important;
    width: auto !important;
    font-size: 15px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding: 8px 16px !important;
    font-weight: normal !important;
    border: 1px solid transparent !important;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    min-width: 51.77708763999664px !important;
    border-radius: 4px !important;
    border-color: #FF5C5C !important;
    -webkit-transition: background 0.3s, border-color 0.3s !important;
    -moz-transition: background 0.3s, border-color 0.3s !important;
    transition: background 0.3s, border-color 0.3s !important;
}

.button{
    padding-top: 16px;
    text-align: center;
}
button.booking {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 15px;

    background:#FF5C5C;
    border-radius: 0;
    border: 1px solid #FF5C5C;
    color: #fff;
    -webkit-transition: background-color .3s,color .3s;
    transition: background-color .3s,color .3s;
}
button.view {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 5px;
    background: transparent;
    border-radius: 0;
    border: 1px solid #FF5C5C;
    color: #FF5C5C;
    -webkit-transition: background-color .3s,color .3s;
    transition: background-color .3s,color .3s;
}
button.profile{
cursor: pointer !important;
-webkit-transition: background 0.3s, border-color 0.3s !important;
-moz-transition: background 0.3s, border-color 0.3s !important;
transition: background 0.3s, border-color 0.3s !important;
position: relative !important;
/*display: inline-block !important;*/
text-align: center !important;
text-decoration: none !important;
border-radius: 4px !important;
width: auto !important;
font-size: 15px !important;
line-height: 18px !important;
letter-spacing: undefined !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
color: #FF5C5C !important;
font-weight: normal !important;
border: 1px solid transparent !important;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
padding-right: 16px !important;
padding-left: 16px !important;
min-width: 51.77708763999664px !important;
border-color: #FF5C5C !important;
background: transparent !important;
}
.row#mobile, .col-md-4#mobile, .col-md-12#mobile{
/*  padding-top: 30px;*/
}
@media (max-width: 992px){
/*.col-md-4#mobile, .col-md-12#mobile{
  padding-top: 0px;
}*/
  .row#mobile {
  padding-top: 5px;
  }
  .col-xs-6#ketengah{
    margin-left: 50px;
  }
/*    .col-md-6#glyph{
        padding: 0;
    }*/
    .jarak{
        margin-top: -10px;
    }
    .judul{
        margin-top:20px !important;
        font-size: 20px !important;
    }
    .posted, .harga, .tanggal, .tempat,.kategori span{
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        font-size: 15px !important; 
    }
    .tombol{
        margin-top: 10px;
        text-align: center;
    }
}
.ct-active{
    border-left: 5px solid #FF5C5C;
}



/* start of Card */

.cardContainer{
  background-color: #fff;
  margin-bottom: 20px;
  padding: 15px;
  padding-right: -15px;
  padding-left: -15px;
}

@media all and (max-width: 760px){

.deskripsi {
    text-align: center;
}
}

.gambar-bid img{
  border-radius: 50%;
  margin: 0 auto;
}

.row{

}

/* STAT OF JOBNYA */

.available-job{
    background: #FFDDF5;
    background: #f9f9f9;
    color: #484848;
    text-align: center;
    padding: 10px;
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    font-weight: 300 !important;
}

.jarak{
display: block;
height: 20px;
}
.harga, .tanggal{
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    color: #484848 !important;
    font-weight: 300 !important;
    display: inline-block !important;
    padding: 15px 0;
    margin-right: 15px
}
 .tempat{
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding-top: 5px !important;
    padding-bottom: 0px !important;
    color: #484848 !important;
    font-weight: 300 !important;
    padding: 15px 0;
    }
.kategori{
    word-wrap: break-word !important;
    font-size: 16px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding-top: 10px !important;
    padding-bottom: 0px !important;
    color: #484848 !important;
    font-weight: 300 !important;
    padding: 15px 0;
}
.kategori span{
        background: #f9f9f9 !important;
        border-radius: 4px;
        border: 1px solid #e9e6e0;
        padding: 2px;
        display: inline-block;
}

.tombol{
    text-align: right;
    padding-right: 30px;
}

.tombol a.detail{
    text-transform: uppercase;
    cursor: pointer !important;
    background: #FF5C5C;
    color: #fff;
    position: relative !important;
    display: inline-block !important;
    text-align: center !important;
    text-decoration: none !important;
    width: auto !important;
    font-size: 15px !important;
    line-height: 18px !important;
    letter-spacing: 0.2px !important;
    padding: 8px 16px !important;
    font-weight: normal !important;
    border: 1px solid transparent !important;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    min-width: 51.77708763999664px !important;
    border-radius: 4px !important;
    border-color: #FF5C5C !important;
    -webkit-transition: background 0.3s, border-color 0.3s !important;
    -moz-transition: background 0.3s, border-color 0.3s !important;
    transition: background 0.3s, border-color 0.3s !important;
}

<div class="card">

<div class="row" style="margin-right: -10px;
margin-left: -10px;">
    <div class="card-info">

        <div class="col-md-12">
            <div class="row" id="jobnya">
               <div class="col-sm-12">
                <div class="available-job">
                    <span><?=$status == 'open' ? 'Still Selecting...': $status;?></span>
                </div>
            </div>
                <div class="col-xs-12 col-sm-3">
                    <div class="gambar">
                        <img src="<?=$client_image?>">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-9">
                    <div class="judul"><?=$title?></div>
                    <div class="posted">
                        Posted on <?php echo format_date($date_added, true);?> WIB
                    </div>
                    <div class="jarak"></div>

                    <div class="harga">
                        <i class="fa fa-money"></i> <span><?=$budget?></span>
                    </div>
                    <div class="tanggal">
                        <i class="fa fa-calendar"></i> <span><?php
                        echo $date;
                        ?></span>
                    </div>
                    <div class="tempat">
                        <i class="fa fa-map-marker"></i> <span><?=$city?>, <?=$province?></span>
                    </div>
                    <div class="kategori">
                        <i class="fa fa-tags"></i> <span><?=$service_category?></span> <!-- <span>Make Up</span> <span>Make Up</span> -->
                    </div>
                </div>

            </div>

        </div>
        <!-- end of col md 12 -->
    </div>
  </div>
</div> <!-- end of card -->
    <!--  end of detail -->
    <!--         <div class="row" id="kartu-bawah"> -->
<div class="cardWrapper">
  <div class="row" style="margin-left: -10px;margin-right: -10px;">
        <!-- first Row -->
            <?php
            foreach ($applicants as $key => $value) { //loop applicants
                $mua_name = explode(' ', $value->rating['name']); 
                ?>
                <div class="col-md-6 cardContainer">
                        
                            <div class="col-xs-12 col-md-3" style="text-align: center;">
                            <div class="gambar-bid">
                                <img src="<?=SAAS_URL."/storage/images/".$value->rating['image'];?>" class="img-responsive" id="kartu" alt="" width="200px">
                                                              <?php
                                        $rating  = $value->rating['rating'] == '' ? 0 : floor($value->rating['rating']);
                                        $rat = '';
                                        if($rating > 0){
                                            for ($i=1; $i <= $rating; $i++) { 
                                                $rat .= '<i class="fa fa-heart fa-xs" style="color:#FF3B3F;"></i>';
                                            }
                                        }
                                        $rating = 5 - $rating;
                                        for ($i=1; $i <= $rating; $i++) { 
                                            $rat .= '<i class="fa fa-heart-o fa-xs" style="color:#FF3B3F;"></i>';
                                        }
                                        ?> 
                
                             <span class="deskripsi-bid-atas"><?=$rat;?></span>
                            </div>
                            </div>             
                  <div class="col-xs-12 col-md-6" style="line-height: 30px;text-align: left;">  

                        <div class="row" id="mobile">
                          <div class="col-xs-12">                         
                             <span class="deskripsi-bid"><i class="fa fa-user" style="font-size: 16px;"></i></span>
                             <span class="deskripsi-bid-atas"><?=$mua_name[0];?></span>
                           </div>
                          <div class="col-xs-12">
                             <span class="deskripsi-bid"><i class="fa fa-money" style="font-size: 16px;"></i></span>
                             <span class="deskripsi-bid-atas"> <?=number_format($value->total)?></span>
                          </div>
                          <div class="col-xs-12" id="ketengah">
                            <button type="button" class="view">Portfolio</button>
                          </div>
                        </div>

                  </div> <!-- col-xs-12 col md 6 -->  
                   <div class="col-md-3" id="mobile">
                            <?php if(!$pernah_di_booking){ ?>
                                <button type="button" value="<?=$value->job_bidding_id;?>" class="booking">Booking</button>
                                <?php } ?>
                                <button type="button" class="booking">Booking</button>
                    </div> <!-- end of row XS -->  
                </div> <!-- end of col md 6 -->

            <?php } //end loop applicants ?>
    </div> 
  </div> 
   <!--  </div> --> <!-- CARD OF WRAPPER -->
<!-- <pre>
<?php //print_r( $applicants);?>
</pre> -->