小屏幕上的列宽度不正确

body {
        background-color: #f5f5f5;
    }
    div { 
        background-color: #fff;
    }
    .index-content a:hover {
      color: black;
      text-decoration: none;
    }

    .index-content {
      /*margin-bottom: 20px;*/
      /*padding: 50px 0px;*/
    }

    .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: 350px;
    }

    .index-content .card h4 {
      margin: 20px;
    }

    .index-content .card p {
      margin: 20px;
      opacity: 0.65;
    }

    .index-content .blue-button {
      width: 100px;
      -webkit-transition: background-color 1s, color 1s;
      /* For Safari 3.1 to 6.0 */
      transition: background-color 0.5s, color 0.5s;
      min-height: 20px;
      background-color: #002E5B;
      color: #ffffff;
      border-radius: 4px;
      text-align: center;
      font-weight: lighter;
      margin: 0px 20px 15px 20px;
      padding: 5px 0px;
      display: inline-block;
    }

    .index-content .blue-button:hover {
      background-color: #dadada;
      color: #002E5B;
    }

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

    .margin_bottom{
        margin-bottom:10px;
    }
    .row [class*="col-"]{ 
        padding-right: 5px;
        padding-left: 5px; 
    }
    .row { 
        margin-left: -5px; 
        margin-right: -5px; 
    }
    
    .card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}

<div class="container">
    <h3>Grid 1</h3>
    <div class="row">
      <div class="col-sm-12">
          <div class="row">
              <div class="col-sm-6 margin_bottom">
                  <img src="http://placehold.it/600x600" alt="5" class="img-responsive"></img>
              </div>
              <div class="col-sm-6">
                  <div class="row">
                      <div class="col-sm-12 margin_bottom">
                          <img src="http://placehold.it/600x300" alt="5" class="img-responsive"></img>
                      </div>
                  </div>
                  <div class="row">
                      <div class="col-xs-6 col-sm-6 margin_bottom">
                          <img src="http://placehold.it/300x290" alt="5" class="img-responsive"></img>
                      </div>
                      <div class="col-xs-6 col-sm-6 margin_bottom">
                        <img src="http://placehold.it/300x290" alt="5" class="img-responsive"></img>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <h3>Grid 2</h3>
  <div class="row">
      <div class="col-xs-12 col-sm-4 margin_bottom">
          <img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img>
      </div>
      <div class="col-xs-12 col-sm-4">
          <div class="row">
              <div class="col-xs-6 col-sm-12 margin_bottom">
                  <img src="http://placehold.it/400x245" alt="5" class="img-responsive"></img>
              </div>
              <div class="col-xs-6 col-sm-12 margin_bottom">
                  <img src="http://placehold.it/400x250" alt="5" class="img-responsive"></img>
              </div>
          </div>
      </div>
      <div class="col-xs-12 col-sm-4 margin_bottom">
          <img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img>
      </div>
  </div>
  <h3>Grid 3</h3>
  <div class="row">
    <div class="col-xs-3 col-sm-3 margin_bottom">
      <!-- I can change the width to 800px to fit the xs viewport. But then the height on the column om sm viewport have to be 1020 px, which is way to high after my opnion -->
        <img src="http://placehold.it/300x610" alt="5" class="img-responsive"></img>
    </div>
    <div class="col-xs-9 col-sm-6 margin_bottom">
        <img src="http://placehold.it/600x600" alt="5" class="img-responsive"></img>
    </div>
    <div class="col-xs-12 col-sm-3 margin_bottom">
        <div class="row">
            <div class="col-xs-6 col-sm-12 margin_bottom">
                <img src="http://placehold.it/300x300" alt="5" class="img-responsive"></img>
            </div>
            <div class=" col-xs-6 col-sm-12">
                <img src="http://placehold.it/300x300" alt="5" class="img-responsive"></img>
            </div>
        </div>
    </div>
  </div>
</div>