Bootstrap layout breaking wrong when inserting space - html

Question

All that I need is put padding or margin between columns.
If I set it in css, the columns break down.
The code html and css is here:
https://codeshare.io/2pwRPz
Without margin, 3 columns, ok but without space:
With css margin, not ok:
My css, uncomment this css to see the problem

Answer 1

This is breaking to the next line because of the margin left you are applying - to get the desired space - what you need to do is to insert the cards WITHIN the col-md-4, and put padding to the div so that the cards will have space between them, but remain within the bootstrap layout.
//css
.cards-postagens-wrapper {
padding: 15px;
}
.cards-postagens {
background-color: #d4ecd6;
height: 9em;
text-align: left;
border-radius: 8px;
}
//html
<div class="col-sm-12 col-md-4 cards-postagens-wrapper">
<div class="cards-postagens">
<div class="badge badge-primary badge-postagens">categoria blog</div>
<div>12 a column here</div>
</div>
</div>
This is demoonstrated by the following snippet.
.cards-postagens-wrapper {
padding: 15px;
}
.cards-postagens {
background-color: #d4ecd6;
height: 9em;
text-align: left;
border-radius: 8px;
}
.badge-postagens {
margin-top: 2%;
margin-left: 2%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container" id="corpo-pagina">
<div class="container-fluid" id="corpo-pagina-conteudo">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 cards-postagens-wrapper">
<div class="cards-postagens">
<div class="badge badge-primary badge-postagens">
categoria blog
</div>
<div>11 a column here</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 cards-postagens-wrapper">
<div class="cards-postagens">
<div class="badge badge-primary badge-postagens">
categoria blog
</div>
<div>11 a column here</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 cards-postagens-wrapper">
<div class="cards-postagens">
<div class="badge badge-primary badge-postagens">
categoria blog
</div>
<div>11 a column here</div>
</div>
</div>
</div>