Problem with width: 100% responsive image in bootstrap 3 for mobile devices

Question

I have a problem that at first is very basic, but I’ve tried everything that is way and is not working

The problem only occurs when opening the site on the smartphone.. if I simulate the resolution in the PC browser it works normal..

See the image below:

Notice that there is a right side margin.. I need the image and the logo to be 100% of the screen.. this problem only occurs on smartphone am using windows phone 10 EDGE.

I am using bootstrap 3 and already use the meta-tags below:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

in html the code is like this:

<div class="container-fluid">
        <div class="row">
        <div class="col-xs-12 col-sm-5 col-md-5">
                <h1 class="logo"><img class="img-responsive" src="logo.png" alt="logo"></h1>
            </div>
            <div class="col-xs-12 no-gutter">
                <img src="maroon5.jpg" alt="" class="img-responsive">
            </div>

        </div>
    </div>

my css is like this:

.no-gutter { padding: 0;}

I tried to put width:100%, padding:0 ! Mportant.. and other things.. but nothing takes that side margin away..

anyone has any idea?