Bootstrap card is not responsive

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%; */
  }   

}