Карточки профиля не совпадают друг с другом [дубликат] ⇐ CSS

[Anonymous]

Итак, в настоящее время я изучаю веб-разработку и пытаюсь создавать карточки профиля, однако карточки не совпадают друг с другом. Я пробовал искать в Google, но решения мне совсем не помогли. Это проблема с div или разделом, или помогите, пожалуйста.

Код: Выделить всё

[url=#Home]CarePlus[/url]

[url=#Doctors]Doctors[/url]
[url=#Clinics]Clinics[/url]
[url=#Pharmacies]Pharmacies[/url]
[i]






[img]https://www.stgeorgehospital.org/storage/staff/710349641729428533.jpg[/img]
Dr. Carole Saba
Pediatric Endocrinology
Faculty of Medicine - University of Balamand
[url=#][/i][/url]
[url=#][i][/i][/url]
[i][url=https://www.linkedin.com/in/carole-michel-saba-8bb611132/?originalSubdomain=frS]linkedin[/url][/i]
[url=cmsaba@stgeorgehospital.org]Contact[/url]




[i]
Dr. Fadi Farhat
Hematology & Medical Oncology
Institut Gustave Roussy, Ville Juif, France
[url=https://www.linkedin.com/in/fadi-farhat-md-mhhm-1162a426/?originalSubdomain=lb][/url][/i]
[url=info@fadi.doctor]Contact[/url]






.card-image.card-img-top {
width: 100%;
height: 150px;
}

.card-img-top {
width: 100%;
}

.card-title {
font-weight: bold;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 250px;
margin: auto;
text-align: center;
}

.title {
color: grey;
font-size: 18px;
}

button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}

a {
text-decoration: none;
font-size: 22px;
color: black;
}

button:hover, a:hover {
opacity: 0.7;
}
.card-image.card-img-top {
width: 100%;
height: 150px;
}

.card-img-top {
width: 100%;
}

.card-title {
font-weight: bold;
}

.CaroleSaba {
display: inline-block;
vertical-align: middle;
}

Я пробовал все, от CSS до нескольких элементов div, но ничего не помогло.

Подробнее здесь: https://stackoverflow.com/questions/787 ... xt-to-each