html, css, bootstrap

Hi,

To center a container both horizontally and vertically using flexbox in CSS, you can apply the following styles to the container:

.container {
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
height: 100vh; /* Set the container height to the full viewport height for vertical centering */
}

By using display: flex, the child elements inside the container will be automatically centered both horizontally and vertically.

This approach centers the container's content regardless of screen size, making it responsive to various devices.

I can see that you have used bootstrap. Personally, I would highly recommend using Tailwind. Let me know if you need any help.

Friend, in the mobile version you need to use the flex-direction:column; property in the main container.

And when you do media queries, you must change the main container's flex-direction property to Row instead of column.

in short, study more about flexbox! he will solve pretty much everything in this challenge.