Styling the Carousel Container

Let's style the container holding the carousel and the carousel slides using CSS.

Copy
<section id="memories" class="container">
    <div class="content-text">
        <h2>Memories</h2>
        <p>These are my precious memories.</p>
        ...
    </div>
</section>

Copy
.container {
    max-width: var(--width-medium);
    margin: 0 auto;
    padding: 16px 32px;
}

.content-text {
    text-align: center;
    margin: 24px 0;
}

.content-text h2 {
    transition: 0.2s ease-in-out;
}

.content-text p {
    padding: 8px;
    margin: 0 auto;
    max-width: 700px;
}

The container uses the max-width property to limit its maximum possible width to the value specified by the --width-medium variable.

The margin: auto property automatically adds spacing on the left and right to center the container, and the padding property adds space between the content of the container and its border.

Inside the container, the <div> element uses the content-text class. This class centers text with the text-align property and adds 24px of vertical margin with the margin property.

The <p> tag uses the padding: 8px; property to add an 8px space between the text and the border and implements centering with margin: 0 auto; for horizontal auto spacing.

Lastly, the max-width property restricts the maximum width of the paragraph tag to 700px.