So i am working on a part of the website where i have a Meet-The-Team. But my containers are not all centered. I have a 6 containers in total in where i have an image and text where they are both centered in the container, but the container is still on the left. Im trying to move the container from the left to the center.
I tried with many codes like justify-content: center; align-self: center;
and every other code that can move the container to the center, but nothing.
/* Three columns side by side */
.column {
float: left;
width: 22.2%;
margin-bottom: 16px;
padding: 0 8px;
text-align: center;
align-self: center;
vertical-align: center;
}
/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
.column {
width: 50%;
display: block;
text-align: center;
align-self: center;
}
}
/* Add some shadows to create a card effect */
.card {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
align-self: center;
text-align: center;
align-self: center;
}
/* Some left and right padding inside the container*/
.container {
padding: 0 2px;
justify-content: space-evenly;
text-align: center;
align-self: center;
margin: 2px;
}
/* Clear floats */
.container::after, .row::after {
content: "";
clear: both;
display: table;
float: center;
text-align: center;
align-self: center;
}
The results end like this
[ C1 ] [ C2 ] [ C3 ] EMPTY SPACE |-| <- Scrollbar
I would like it to be like this
EMPTY SPACE [ C1 ] [ C2 ] [ C3 ] EMPTY SPACE |-| <- Scrollbar
