Padding on a Bootstrap 3 col seems impossible to remove

Question

I am having some big problems with padding. Before the description of my problem make sense, there is 2 pages to see in the inspector window - and look in the mobile view device section:

1: This demopage is working as it should.

2: This demopage is not working.

The difference between the 2 pages is that I added one more row with three pictures in it. The row with 3 pictures is basic builded up like this:

<div class="row wrapping">
    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-8 margin_bottom">
                <!-- Picture 1 -->
            </div>
            <div class="col-sm-4">
                <div class="row">
                    <div class="col-sm-12 margin_bottom">
                        <!-- Picture 2 -->
                    </div>    
                </div>
                <div class="row">
                    <div class="col-sm-12 margin_bottom">
                        <!-- Picture 3 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

As I see it there is set a padding on the inner columns col > row > col? How can I remove that padding? I removed the padding on the rows with the below code, and thought that would also count for all columns.

.row.wrapping {
    margin-right: 0;
    margin-left: 0;
  }
    .wrapping > [class^="col-"], .wrapping > [class^=" col-"] {
      padding-right: 0;
      padding-left: 0;
  }

The most important thing is that I cannot start overwriting Bootstrap classes since the whole site is building up with bootstrap. So every change I am overwriting in the bootstrap framework has to be named unique.

#front .row {
  padding-bottom: 0px!important;
}

body {
  background-color: #f5f5f5;
}


/* Removes default right padding */

.row.wrapping {
  margin-right: 0;
  margin-left: 0;
}

.wrapping>[class^="col-"],
.wrapping>[class^=" col-"] {
  padding-right: 0;
  padding-left: 0;
}


/* Set width between grid elements */

.small-padding.top {
  padding-top: 10px;
}

.small-padding.bottom {
  padding-bottom: 10px;
}

.small-padding.left {
  padding-left: 5px;
}

.small-padding.right {
  padding-right: 5px;
}

.margin_bottom {
  margin-bottom: 10px;
}

.img-responsive {
  height: 100%;
}


/* Position of buttons/text in a single grid element */

.inner-wrapper {
  background: none;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.bottom-left {
  position: absolute;
  bottom: 2%;
  left: 6%;
}


/* Position text on full width banner */

.header-container {
  color: white;
  margin: 0 5%;
}

.banner-text {
  position: absolute;
  bottom: 3%;
  left: 1%;
  width: 80%;
}


/* Color on text */

.dark-font {
  color: #333;
}

.light-font {
  color: #fff;
  text-transform: uppercase;
}

.blue-font {
  color: #00a9ff;
  text-transform: uppercase;
  margin-top: -10px;
}


/* Set full width on columns */

@media (max-width: 768px) {
  .img-responsive {
    width: 100%;
    height: auto;
  }
  /* btn-success: */
  .btn-success {
    width: fit-content;
  }
}

@media (max-width: 991px) {
  h3 {
    font-size: 1.2em;
  }
}


/* Hover for grid elements that contains text */

.hovereffect {
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  background-color: rgba(170, 170, 170, 0.4);
}

.hovereffect h2,
.hovereffect img {
  transition: all 0.4s ease-in-out;
}

.hovereffect img {
  display: block;
  position: relative;
  transform: scale(1.1);
}

.hovereffect:hover img {
  transform: scale(1);
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
}

.hovereffect p.info {
  text-decoration: none;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.4s ease-in-out;
  font-weight: normal;
  height: 90%;
  width: 90%;
  top: 5%;
  /* (100% - 85%)/2 */
  left: 5%;
  position: absolute;
  text-align: left;
  padding: 20px 20px 20px 20px;
}

.hovereffect:hover p.info {
  opacity: 1;
  transform: scale(1);
  background-color: rgba(0, 0, 0, 0.4);
}


/* Hover fadeout head and subline */

.hovereffect:hover .inner-wrapper.bottom-left h3,
.hovereffect:hover .inner-wrapper.bottom-left span {
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .inner-wrapper.bottom-left h3,
.hovereffect:hover .inner-wrapper.bottom-left span {
  opacity: 0;
}


/* Hover opacity for grid elements without text*/

.column {
  padding: 0;
}

.column:last-child {
  padding-bottom: 60px;
}

.column::after {
  content: '';
  clear: both;
  display: block;
}

.column div {
  position: relative;
  float: left;
  width: 300px;
  height: 200px;
  margin: 0 0 0 25px;
  padding: 0;
}

.column div:first-child {
  margin-left: 0;
}

figure {
  margin: 0;
  padding: 0;
  background: #fff;
}

figure:hover+span {
  bottom: -36px;
  opacity: 1;
}


/* Opacity #1 */

.hover11 figure img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: 0.8s ease-in-out;
}

.hover11 figure:hover img {
  opacity: .5;
}

<div class="wrapper">
  <div class="row wrapping">
    <div class="col-xs-12 col-sm-12 margin_bottom">
      <!--<div class="hover11 column">-->
      <a href="#">
        <picture>
          <source media="(min-width: 650px)" srcset="https://mimsi.dk/Static/Cms/d211428c-7ea9-4805-8b66-ee73d7f1df2d.jpg"></source>
          <source media="(min-width: 320px)" srcset="https://mimsi.dk/Static/Cms/b1cbb0f1-9e91-4d55-8a8e-65631432c38b.jpg"></source>
          <img src="http://mimsi.dk/Static/Cms/d211428c-7ea9-4805-8b66-ee73d7f1df2d.jpg" alt="mimsi Partnerværksteder" style="width:100%;"></img>
        </picture>
        <div class="inner-wrapper banner-text">
          <div class="header-container">
            <h2 class="blue-font" style="text-shadow: 2px 2px #000000;">Find nærmeste mimsi </h2>
            <p class="light-font" style="text-shadow: 2px 2px #000000;">#</p>
            <!--<span class="btn btn-primary" role="button">Lorem Ipsum</span>-->
          </div>
        </div>
      </a>
      <!--</div>-->
    </div>
  </div>
  <!-- DELETE THIS ROW IN THE INSPECT WINDOW -->
  <div class="row wrapping">
    <div class="col-sm-12">
      <div class="row">
        <a href="/da-dk/page/bmw-packages/">
          <div class="col-sm-8 margin_bottom">
            <div class="hover11 column">
              <figure>
                <picture>
                  <source media="(min-width: 650px)" srcset="https://mimsi.dk/Static/Cms/f30dfbf6-047a-4aa4-829f-48d4223d05be.jpg"></source>
                  <source media="(min-width: 320px)" srcset="https://mimsi.dk/Static/Cms/ce50c03a-0e95-4760-95a4-e2ad2a1b6e43.jpg"></source>
                  <img src="https://mimsi.dk/Static/Cms/f30dfbf6-047a-4aa4-829f-48d4223d05be.jpg" alt="Lorem Ipsum" style="width:100%;"></img>
                </picture>
              </figure>
            </div>
            <div class="inner-wrapper bottom-left">
              <h3 class="light-font" style="color:#333">Lorem Ipsum</h3>
              <span class="light-font" style="color:#00a9ff">Lorem Ipsum</span>
              <!--<button class="btn btn-success btn-lg">Læs mere</button>-->
            </div>
          </div>
        </a>
        <div class="col-sm-4">
          <div class="row">
            <a href="#">
              <div class="col-sm-12 margin_bottom">
                <div class="hover11 column">
                  <figure>
                    <img src="https://mimsi.dk/Static/Cms/7da4b142-e174-4dd4-aa44-cb175c1f92f0.jpg" alt="mimsi Lorem Ipsum" class="img-responsive"></img>
                  </figure>
                </div>
                <div class="inner-wrapper bottom-left">
                  <h4 class="light-font" style="color:#00a9ff">Vi er eneforhandler I Danmark</h4>
                  <span class="light-font">Lorem Ipsum</span>
                  <!--<button class="btn btn-success btn-lg">Læs mere</button>-->
                </div>
              </div>
            </a>
          </div>
          <div class="row">
            <a href="#">
              <div class="col-sm-12 margin_bottom">
                <div class="hover11 column">
                  <figure>
                    <a href="#" data-toggle="modal" data-target="#nyhedsbrev-tilmelding">
                      <img src="https://mimsi.dk/Static/Cms/d065fdf8-a5b1-4137-ba54-74c351185d36.jpg" alt="Signup newsletter" class="img-responsive"></img>
                    </a>
                  </figure>
                </div>
                <div class="modal fade" id="nyhedsbrev-tilmelding" role="dialog">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-body">
                        <div id="mc_embed_signup">

                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="inner-wrapper bottom-left"></div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

I'm not sure what you want to achieve, but for me, if you make a very little change at page https://koed.dk/da-dk/page/stack like below, then effect is great:

.row.wrapping,
.row.wrapping .row {
    margin-left: -5px;
    margin-right: -5px;
}
.wrapping [class^=col-] {
    padding-left: 5px;
    padding-right: 5px;
}

Answer 2

Brother in your styles you have this code .

 .margin_bottom {
    margin-bottom: 10px;
}

Remove it. That'll solve your problem.