Отображение: свойство блока предотвращает выравнивание моего элемента внутри элемента div

У меня проблема с моим css. Я не могу выполнить align-items: end на элементе кнопки.

Браузер говорит: Свойство display: block предотвращает действие align-items. Попробуйте настроить отображение на что-то другое, кроме блока

Если я изменю отображение на flex на родительском div, закрытые карты перепутаются. Любые предложения по этому поводу? Я публикую часть html и css ниже.

 <div class = "flex-center">
                <div class = "portfolio__cards">
                    <div class = "portfolio__cards__scroll">
                        <div id = "card1" class = "card">
                            <h2>OSC Website</h2>
                            <p id = "card1text">A website to serve as a landing page for new members as a hub of information about the club, with a dynamic blog and content management system.
                                Built in Javascript, HTML, CSS, with the frameworks/tools: NodeJS, Express, EJS.
                            </p>
                            <button onclick = "location.href = 'https://github.com/ufosc/Club_Website_2';">SOURCE</button>

                        </div>
                        <div id = "card2" class = "card">
                            <h2>Schedule Helper</h2>
                            <p id = "card2text"> A website to assist students in creating schedules that work for them by using UF's Schedule of Courses along with
                                RateMyProfessor and GatorEval scores. Built in Typescript and Python, with the frameworks/tools: React, Tailwind.
                            </p>
                            <button onclick = "location.href = 'https://github.com/ufosc/Schedule_Helper';">SOURCE</button>
                        </div>
                        <div id = "card3" class = "card">
                            <h2>Lunch Buddy</h2>
                            <p id = "card3text">An application that lets you find and match with like-minded students on campus to study, have a meal with, and more!
                                Built with React Native for the front-end, Golang for the back-end, and MySQL.
                            </p>
                            <button onclick = "location.href = 'https://github.com/ufosc/Lunch_Buddies';">SOURCE</button>
                        </div>
                        <div id = "card4" class = "card">
                            <h2>Manim</h2>
                            <p id = "card4text">Inspired by 3Blue1Brown, creating a plug-in that adds to the Manim project which would allow for programmatic animation of computer science concepts.
                                Built in Python, with the frameworks/tools: Poetry, Manim. Working to be better than Tinder.
                            </p>
                            <button onclick = "location.href = 'https://github.com/ufosc/manim-data-structures';">SOURCE</button>
                        </div>
                        <div id = "card5" class = "card">
                            <h2>API Group</h2>
                            <p id = "card5text">Working on several small projects that involve APIs to gain knowledge about building and using them. Built in Python,
                                with FastAPI.
                            </p>
                            <button onclick = "location.href = 'https://github.com/ufosc/UF-API-GROUP';">SOURCE</button>
                        </div>
                        <button class = "portfolio__cards__scroll__btn-left"><img src = "./assets/left-swipe-arrow.png" alt = "left arrow"></button>
                        <button class = "portfolio__cards__scroll__btn-right"><img src = "./assets/left-swipe-arrow.png" alt = "right arrow"></button>
                    </div>
                </div>
            </div>

Часть CSS

.portfolio__cards__scroll {
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    gap: 20px;
    scroll-behavior: smooth;
    max-width: 1200px;
    margin: 0 auto;
}

.portfolio .portfolio__cards {
    position: relative;
    width: 100vw;
    max-width: 1200px;
    overflow: hidden;
    padding: 30px;
}

.portfolio .portfolio__cards__scroll .card {
    padding: 20px;
    border-radius: 20px;
    min-width: 300px;
    max-width: 300px;
    display:inline;
}
.portfolio .portfolio__cards__scroll .card button {
    background-color: black;
    color: white;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 20px;
    border: none;
    display: inline;
}

Все, что я хочу, это чтобы кнопка оставалась внизу карты, а размер карты оставался одинаковым для всех других карт. Но атм сбоку выглядит вот так.введите сюда описание изображения

Я пытался:

• придание родительскому элементу display: flex (полностью испортил карточку.
• установка кнопок внизу с помощью: align-self: end или align-items-end

выравнивание всего внутри карточки в конце (устанавливает все внутри карточки внизу и размер карточки становится другим (см. картинку)здесь введите описание изображения

🤔 А знаете ли вы, что...
HTML можно использовать для создания структурированных документов, таких как резюме и инструкции.