When my elements reach the breakpoint of 1199, I have an issue with their alignment. Despite using justify-content, the style breaks and the cards are not stacked together as intended. I tried using mx-auto, but it doesn't seem to work. I've noticed that my Bootstrap card columns are taking up too much space, and I attempted to align the cards similarly to how I did with texts in a grid, but it's not working as expected. When I reach the large breakpoint, I want the cards to be stacked evenly in the middle, rather than appearing the way they currently do. I could achieve this using padding, but it doesn't feel like the best or right way to do it.
.wrapper3 {
max-width: 100%;
min-height: 70vh;
background-color: red;
}
.card-container {
display: flex;
justify-content: center;
align-items: center;
}
.cardStyle {
max-width: 380px;
min-height: auto;
background-color: #2e2d2c;
}
@media screen and (max-width: 600px) {
.wrapper3 {
width: 100%;
background-color: red;
}
.cardStyle {
width: 70%;
height: auto;
background-color: #2e2d2c;
}
}
<!-- HTML code snippet -->