My image doesn't take the full width of the div-CodePudding

here's my code

<div >
        <div >
            <Navbar  v-if="!isMobile"></Navbar>
            <div  style="background:red">
               <img  height="334.73" src="/modern-minimalist-interior-with- 
               armchair-empty-white-wall-3d-rendering.jpg" />
           </div>
        </div>
 </div>

and it also doesn't work with " position " property it leads to a strange behavior

CodePudding user response：

You must make column padding = 0

user inline style style="padding:0;" or bootstrap class p-0

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div >
        <div >
            <Navbar  v-if="!isMobile"></Navbar>
            <div  style="background:red">
               <img  height="334.73" src="https://via.placeholder.com/1024x768" />
           </div>
        </div>
 </div>

CodePudding user response：

If you inspect the element, you can see that bootstrap containers and columns have some padding, while the row have some negative margins.
A solution would be to add the class gx-0 on the row, which removes the gutter between the columns