First item is getting pushed down by title it seems. What is a common approach to fix this problem and keep everything centered?

DonnyRodriguez 0
Viewed 22

The left most item is not aligned with the rest of the items. How to i center them correctly?

.activities{
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 25px;
    background-color: #F3FAEF;
    text-align: center;
}

.activities-image{
    border-radius: 50%;
    width: 150px;
    height: 150px;
}

.activities-header{
    font-size: 18px;
    font-weight: bold;
}


.activities-cols{
    display: flex;
    align-items: center;
  text-align: center;
}

.activity-col{
    border: 1px solid red;
    width: 330px;
    height: 330px;
}

Demo: https://codepen.io/AdanRod133/pen/jOxPBEX Full-page: https://codepen.io/AdanRod133/full/jOxPBEX

vertical-alignment flexbox css
1 Answers

enter image description here

.activity-col {
    border: 1px solid red;
    width: 330px;
    height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
Ashish radadiya0
Related