For some reason, the flex items by default have a column flex-direction. On top of that, none of the stylings I do seems to be working.

I want the text, image, and buttons to be centered on the page, but can't seem to alter the styling of the container. The items are always all the way to the right in a column format.

Here's the HTML code:

```
    <div class="wp-item">
    <h6>Date:</h6><p id="date">September 7th, 2022</p>
    </div>
    <div class="wp-item">
    <img src="prompt30.png" id="prompt" alt="prompt30" height="300px">
    </div>
    <div class="wp-item">
    <button onclick="goThroughWritingPromptsLeft()"><i class="fa-sharp fa-solid fa-play fa-rotate-180"></i></button>
    <button onclick="goThroughWritingPromptsRight()"><i class="fa-sharp fa-solid fa-play"></i></button>
    </div>
</div>

```

Here is the stylesheet code:

```
.writingprompts-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

}

```