How to place text over an image?

Question

css

https://jsfiddle.net/artmir/09dvg3s1/3/
Here is my code. How to make the text be a little higher and not climb into the area marked with a red rectangle (see screenshot), that is, it should be a little higher, but the height of the .slider should be 100vh and the text should be inside the image.

Answer 1

For .slider, add these properties:

display: flex;
justify-content: center;

The image in the center will rise.
To make the text look like in the image, you need to set the title class property: max-width: 550px;
Here is the codepen link: https://codepen.io/EugeneKarmyshkov/pen/wvdqPez