Why is Flexbox creating unnecesary spacing? - html

Question

So I'm writing a code where I need to evenly place cards next to each other with rows when using flex. However, I'm getting some spacing on the right side and can't work out a reason why is that happening. I tried inspecting the element, but it just shows the entire card extends to the right, but there is no real reason behind why it does that. I've scrolled through CSS code, and there's no additional width on the right.
<section id="jobs">
<!--Employing cards-->
<div class="container-fluid container-fluid-shorter bg-white">
<!--Assistant card-->
<div class="row">
<div class="col-md-6 col-lg-4 my-3">
<div class="card width-37">
<div class="card-body d-flex align-items-center justify-content-between">
<h6 class="card-title font-weight-lighter pb-3">Custom units</h6>
<p class="card-text">
<h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card width-37">
<div class="card-body d-flex align-items-center justify-content-between">
<h5 class="card-title font-weight-lighter pb-3">Vlastní jednotky</h5>
<p class="card-text">
<h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 my-3">
<div class="card width-37">
<div class="card-body d-flex align-items-center justify-content-between">
<h5 class="card-title font-weight-lighter pb-3">Vlastní jednotky</h5>
<p class="card-text">
<h4 class="text-grey font-weight-light text-capitalize pb-3 pt-3">home page hero</h4>
</div>
</div>
</div>
</div>
</div>
<!--End of employing cards section-->
</section>
Adjustments I've made to the CSS :
.width-37{
max-width: 37.5vh;
}
.card-body{
padding-left: 0; !important;
padding-right: 0; !important;
}
I'm trying to place all the items in the row where there is a small spacing between each item and all items will create rows as you set rows for different screen sizes large, medium, small. For some reason flex item is doing spacing on the right side of each item there is. It is 480 pixels wide and 180 height. I would like it to be 180 x 180 pixels so same height and width. Anyone got an idea on why is this happening?

Answer 1

.width-37{
max-width: 37.5vh;
}
This is causing the spacing on right side. Also, there should be no ; before !important

Answer 2

This is due to how block level elements are rendered and not a Flexbox specific issue. Block level elements always take up the full width of the containing element. If you set a width on a block level element, and it does not fill the containing element, the remaining space will be filled with margin.
Example
div {
min-height: 24px;
}
div:nth-child( 1 ) {
width: 100px;
background-color: rebeccapurple;
}
div:nth-child( 2 ) {
max-width: 200px;
background-color: gold;
}
div:nth-child( 3 ) {
width: 20vw;
background-color: silver;
}
<div></div>
<div></div>
<div></div>
The default flow of content is left to right and why the element is to the left. All the space to the right of each element is margin. This is what is happening inside of your Bootstrap column elements.

Answer 3

This is the why
*Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
Documentation here
In order to remove the padding on your gutter you can add the class no-gutters to your row.