title: Bootstrap card is not responsive
body: <p>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. </p>
  
  <p>I have been looking for hours now, but cannot understand where the error is. Can somebody help me out figure out this problem?</p>
  
  <p><a href="http://vouzalis.dk/stack.html" rel="nofollow noreferrer">The demosite is here</a></p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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 &gt; 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%
        }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;!-- Partnerværksteder --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12 small-padding right bottom"&gt;
              &lt;div class="index-content"&gt;
                  &lt;div class="card"&gt;
                      &lt;img src="https://s-media-cache-ak0.pinimg.com/originals/87/bf/cf/87bfcfb36780c0fec472d8d301be7a1c.jpg"&gt;&lt;/img&gt;
                      &lt;div class="card-content"&gt;
                          &lt;div class="card-content__info"&gt;
                            &lt;h4&gt;Højt serviceniveau og kvalitet&lt;/h4&gt;
                            &lt;span class="sub-headline"&gt;Find nærmeste mercedes partnerværksted&lt;/span&gt;  
                          &lt;/div&gt;   
                          &lt;button type="button" class="btn btn-success bottom-right btn-custom"&gt;Find et værksted&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>