None of the div is using max width of 100% when inspect on mobile device

Question

I am working on one project and I have created three pages but when I tried to map them for mobile device, I socked that none of the div class like.container-fuild, row or col-12 is using 100% width. Actually, its using 100% width but for @320 its only utilizing 70-80% of screen.

<div class="container-fluid no-padding">
<div class="row no-gutters">
    <div class="col-lg-12 col-12">
        <div class="header-banner">
            <div class="row pt-2 pb-3 mx-auto no-gutters">
                <div class="col-lg-4 col-12 mx-auto">
                    <div class="header-img-container">
                        <img class="" src="img/grocery.png"> 
                    </div>
                </div>
                <div class="col-lg-6 col-12 mx-auto">
                    <div class="header-banner-container pt-5">
                    </div>
                 </div>
           </div>
        </div>
           </div>
        </div>

This is the part of code that i have shared. I am using bootstrap 4 and tried to map the code for

@media only screen 
 and (min-device-width: 320px) 
 and (max-device-width: 480px)
 and (-webkit-min-device-pixel-ratio: 2) {

I am sure that the media has no link with my issue but its my responsibility to update you..

Leads would be appreciate.

Output is shown in the shared image

Answer 1

To me this issue is clearly caused by the image(s) not on 100% width.

Add a CSS class img-fluid to your images and the container will be on 100% as well.

documentation

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.