Currently i have the following:

[![enter image description here](https://i.stack.imgur.com/kkdtL.png)](https://i.stack.imgur.com/kkdtL.png)

I would like the collapsible cards to be centered under the text and icons.. How would i go about doing that? I have tried using CSS on the div, however nothing seems to make a change in their position?

The code i have so far:

```
<div class="categoryList">

            @result
            @if (result == "")
            {
                foreach (String dataLine in userData)
                {

            <p>
                <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">

                    @dataLine.Split(delimiterChar)[0]

                </a>

                <button class="btn"><i class="fas fa-plus secondaryPlusIcon"></i></button>
                <button class="btn"><i class="far fa-edit secondaryPlusIcon"></i></button>
                <button class="btn"><i class="far fa-trash-alt secondaryPlusIcon"></i></button>

            </p>

                <div class="collapse" id="collapseExample">
                    <div class="card card-body w-25 p-3">

                    </div>
                </div>

                }

            }

        </div>

```