Bootstrap card is not responsive - html

Question

I am really breaking my head here. When I look at the following bootstrap 3 card on my mobile, I can see that I can move the webpage to the left and right. I therefore conclude there is something wrong in my CSS.
I have been looking for hours now, but cannot understand where the error is. Can somebody help me out figure out this problem?
The demosite is here
I cut a lot of html away there is not relevant for the question. Therefore there is some css classes that is not used in the following html.
body {
background-color: #f5f5f5;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
/*height: 400px;*/
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
/* 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;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons in a single grid element */
.inner-wrapper {
text-align: center;
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: 8px;
left: 16px;
}
.header-textbox-bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.card-content {
display: flex;
padding: 10px 10px;
justify-content: space-between;
align-items: flex-end;
}
.card-content__info {
display: flex;
flex-direction: column;
left: 3em;
position: relative;
}
.card-content__info > h4 {
padding: 0 !important;
margin: 5px 0 !important;
text-transform: uppercase;
}
.sub-headline {
color:#00a9ff !important;
text-transform: uppercase;
font-size:20px;"
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
}
.index-content .card img {
height: 100%
}
.card-content__info {
flex-direction: column;
left: 0;
}
.card-content {
flex-direction: column;
left: 20px;
position: relative;
align-items: inherit;
}
/* Position button on banner with textbox */
.header-textbox-bottom-left {
position: static;
bottom: 8px;
left: 16px;
text-align: left;
padding-left: 20px;
padding-bottom: 5px;
}
.btn-custom {
position: static;
width: fit-content;
margin-top: 15px;
}
.btn-success {
width: fit-content;
}
}
#media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
/* GRID ELEMENTS MEDIA QUERIES */
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p,
.card-content span {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
.card-content-textbox {
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.7);
/*right: 0;*//* top position on right*/
margin: 15px;
max-width: 300px;
height: 91%
}
}
<div class="container">
<!-- Partnerværksteder -->
<div class="row">
<div class="col-sm-12 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="https://s-media-cache-ak0.pinimg.com/originals/87/bf/cf/87bfcfb36780c0fec472d8d301be7a1c.jpg"></img>
<div class="card-content">
<div class="card-content__info">
<h4>Højt serviceniveau og kvalitet</h4>
<span class="sub-headline">Find nærmeste mercedes partnerværksted</span>
</div>
<button type="button" class="btn btn-success bottom-right btn-custom">Find et værksted</button>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Follow an image that show the div broken your layout.
You will need to change this parts of your css.
// Remove all comments styles
.card-content {
display: flex;
padding: 10px 30px;
justify-content: space-between;
/* align-items: flex-end; */
}
#media (max-width: 768px) {
.card-content {
flex-direction: column;
/* left: 20px; */
/* position: relative; */
/* align-items: inherit; */
/* max-width: 100%; */
/* width: 100%; */
}
}