Padding on a Bootstrap 3 col seems impossible to remove - html

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.

Answer 3

One solution to your problem is that make a new css class no-padding like this
.no-padding{
padding-right: 0!important;
padding-left: 0!important;
}
And then add the no-padding class to your html row or col for which you want to remove padding like this.
<div class="row wrapping">
<div class="col-sm-12 no-padding"> <!-- notice here -->
<div class="row">
<div class="col-sm-8 margin_bottom no-padding"><!-- notice here -->
<!-- Picture 1 -->
</div>
<div class="col-sm-4 no-padding"><!-- notice here -->
<div class="row">
<div class="col-sm-12 margin_bottom no-padding"><!-- notice here -->
<!-- Picture 2 -->
</div>
</div>
<div class="row">
<div class="col-sm-12 margin_bottom no-padding"><!-- notice here -->
<!-- Picture 3 -->
</div>
</div>
</div>
</div>
</div>
</div>
In this way you won't have to override the bootstrap classes and you won't break the layout.