bootstrap margin under 576px - html

Question

I implement a bootstrap site. I have an issue in the case the width of the screen is under 576 px (xs for bootstrap)
Don't pay attention to details, I am only interested in the margin of the content in red
<div class="container">
<div class="col-xs-12" *ngIf="innersize < 576">
<div class="row">
<div style="background-color: red"*ngFor="let pr of annonces; let index = index;" class="col-xs-12">
<div id="prePreviousMapIdXS" [style.height.px]="0" *ngIf="index === (insertIndex-1)"></div>
<div id="previousMapIdXS" [style.height.px]="0" *ngIf="index === insertIndex"></div>
<div id="card{{index}}IdXS">
<app-product-light (mouseenter) ="mouseEnterProduitImmobilier(index)" (mouseleave) ="mouseLeaveProduitImmobilier(index)" [produit]="pr"></app-product-light>
</div>
<div id="listXSMap" [style.margin-bottom.px]="25" [style.width.px]="cardWidth" [style.height.px]="cardHeight" *ngIf="index === insertIndex" >
<agm-map #gm [latitude]="mainLatitude" [longitude]="mainLongitude" [style.height.px]="computeMapXSHeight()" [fitBounds]="true">
<agm-marker *ngFor="let marker of markers; let index = index" [latitude]="marker.latitude" [longitude]="marker.longitude" [iconUrl]="markers[index].markerIcon" [animation]="markers[index].markerAnimation" (markerClick)="clickedMarker(infoWindow, gm)" [agmFitBounds]="true">
<agm-info-window [disableAutoPan]="false" #infoWindow [maxWidth]="350">
<span class="">
<div style="float: left;">
<img width="70" height="40" src="../../assets/images/maison1.png" alt="Card image cap">
</div>
<div style="float: right; padding-left: 10px">
<div class="poppinsbold10diese372300 whitespacenowrap">{{annonces[index].nbrPiece}}
Pièces / {{annonces[index].nbrChambre}} Chambres / {{annonces[index].surfaceHabitable}}m<sup>2</sup>
</div>
<div class="poppinsregular8diese171717DE whitespacenowrap opacity05 ">
{{annonces[index].adresse}} / {{annonces[index].ville}} / {{annonces[index].codePostal}}
</div>
<div class="poppinsextrabold10diese372300 whitespacenowrap" style=" margin-top: 5px">
{{annonces[index].prix | currency:'EUR':'symbol':'1.0-0':'fr'}}
</div>
</div>
</span>
</agm-info-window>
</agm-marker>
</agm-map>
</div>
</div>
</div>
</div>
</div>
Here is the fiddle : https://jsfiddle.net/boilerplate/bootstrap
The issue is that when I resize the width under 576px, there is no more margin. Above that size there is a margin

Answer 1

That's the default behavior of .container on mobile devices: width: 100%. If you want to limit it to say 94% of the available device width below 576px, use this CSS:
#media (max-width: 575px) {
.container {
width: 94%;
}
}
See it here: https://jsfiddle.net/websiter/p1n0j4vu/
Change 94% to whatever makes sense for your project.
For example, if you want to maintain fixed margins of 30px below that responsiveness breakpoint, you could use calc(100% - 60px).

Answer 2

The issue is that you're using the container class for your container. You can instead use the container-fluid class and style it to have padding. Here's a JSFiddle. The difference between the container class and container-fluid class is that the container class will resize and adjust its margin depending on the size of the viewport. Here is the adjusted code:
HTML:
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container-fluid">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
CSS:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.container-fluid {
padding: 0 30px;
}

Answer 3

I finally found a solution without understandind it
In place of
col-xs-12
I put everywhere
col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12
and it works