Background image is going out of row < 768 px

Question

I am trying to figure out why the picture is going out of the row on our contact page using Bootstrap 3. When I minimize the screen on google chrome it is looking fine, but when I look at the page on an iPhone - it is looking like this:

(I can see the Stack picture upload function is not working. Therefore I am linking to the picture on the domain --imgbb instead):

I have a thought of it could be the below class there is messing things up. I have to use a prefix for the some of the core classes I use, so I am not affecting the whole site. In this case, I wanted to make a 20px margin on the page when the screen is < 768px. Someone suggested me to wrap all the code in a row because the container is called in the backend and have its own style.

/* Make a 20px margin on mobile devices */
@media (max-width: 768px) {
        .mk .row {
            margin-left: 20px !important;
            margin-right: 20px !important;
        }
}

I would like that the background picture on the banner is taking full width on mobile. Does anybody have an idea on how I can solve this? I am pretty much stuck.

I tried to sort out the code there is not relevant for the question.

.mk .row [class*="col-"] {
        padding-right: 5px;
        padding-left: 5px;
    }

    
    .mk-page-header { 
        background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(https://vou.dk/Cms/333780ed-bd2b-4513-9186-af155e172a57.jpg)
        no-repeat; 
        position: relative; 
        background-size: cover; 
    }
    .mk .row {
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .page-caption { 
        padding-top: 170px; 
        padding-bottom: 174px; 
    }
    .page-title { 
        font-size: 46px; 
        line-height: 1; 
        color: #fff; 
        font-weight: 600; 
        text-align: center; 
    }
    
    .card-section { 
        position: relative; 
        bottom: 140px;
        margin-bottom: -80px;
    }
    .card-block { 
        padding: 20px 80px 50px 80px;
        box-shadow: 20px 20px 50px grey;
        background-color: #fff;
    }
    .section-title { 
        margin-bottom: 40px;
    }

    .img-responsive-mk {
        width: 35% !important;
    }
   
    @media (max-width: 768px) {
        .img-responsive-mk {
            width: 100% !important;
        }
        .card-block {
            padding: 10px;
            margin-left: 10px;
            margin-right: 10px;
        }
        .page-title {
            font-size: 30px;
        }
        .mk-heading {
          font-size: 24px;
        }
        h2 {
            font-size: 1.5em;
        }
        h3 {
            font-size: 1em;
            text-align: center;
        }
        /* Make a 20px margin on mobile devices */
        .mk .row {
            margin-left: 20px !important;
            margin-right: 20px !important;
        }
        /* Owerwrite the core padding on a row */
        .contact-icon .row {
          margin-left: 0px !important;
            margin-right: 0px !important;
        }
        
    }

<div class="mk row" style="background-color: white;">
 <!-- page-header -->
  <div class="mk-page-header">
      <div class="container">
          <div class="row">
              <div class="col-sm-12">
                  <div class="page-caption">
                      <h1 class="page-title">KONTAKT VORES SUPPORT</h1>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <!-- Card Section -->
  <div class="card-section">
      <div class="container">
          <div class="card-block">
              <div class="contact-icon row">
                  <div class="section-title">
                      <h2>HAR DU SPØRGSMÅL?</h2>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
                  </div>
                  <div class="col-sm-12">
                      <div class="contact-icon row">
                          <div class="col-xs-4">
                              <a href="tel:+4512345678">
                                <img class="img-responsive-mk center-block" src="https://vou.dk/Static/Cms/6dfe32ba-7cff-443d-ab73-016dd2f6dca7.jpg"></img>
                              </a>
                              <a href="tel:+4512345678"><h3 style="text-align:center;">Ring til os</h3></a>
                          </div>
                          <div class="col-xs-4">
                              <a href="mailto:[email protected]">
                                <img class="img-responsive-mk center-block"  src="https://vou.dk/Static/Cms/57e5b8a2-871d-487f-90e4-ae8b8d170ca2.jpg"></img>
                              </a>
                              <a href="mailto:[email protected]"><h3 style="text-align:center;">Skriv til os</h3></a>
                          </div>
                          <div class="col-xs-4">
                              <a href="https://www.facebook.com//">
                                <img class="img-responsive-mk center-block"  src="https://vou.dk/Static/Cms/3caa853e-7da3-4e1f-9aa2-a04ee71901c9.jpg"></img>
                              </a>
                              <a href="https://www.facebook.com//"><h3 style="text-align:center;">Facebook</h3></a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

Answer 1

The issue is caused by your .container-fluid and #chrome element. Container-fluid applies padding but you cancel it out with padding: 0; on #chrome. You have to solve that part differently.

Solution 1: I suggest moving container-fluid class to #front element. But that is up to you. But .container-fluid is needed to prevent the image spilling out because rows have negative margins (that's why they are spilling over) and it's usually good to wrap them inside a container to prevent this.

Solution 2: Remove row from <div class="mk row" style="background-color: white; --darkreader-inline-bgcolor:#212127;" data-darkreader-inline-bgcolor=""> And then wrap all other rows in a .container except the .mk-page-header.

Advice: When testing and searching for this kind of issues use dev-tools in your browser. It will make your life so much easier. Dev-tools are great and a very powerful tool. Once you get a hang of it you will see it's hard to do without :)

Hope this helps!