I have this code, in an app that uses Tailwind CSS.

i have a problem with my code

So I making a bottom footer I want that div to placed at top right using flex, can someone help me with this?

My div (highlighted with background yellow) is expanding horizontally i.e., it’s width is increasing. I think it is increasing to the full width of the image i.e., 800px + margins. How can I make sure this div’s width and height is equal to the shrunk containing image? So that the next element with text- “Test” is displayed right next to it. Thanks!

My div (highlighted with background yellow) is expanding horizontally i.e., it’s width is increasing. I think it is increasing to the full width of the image i.e., 800px + margins. How can I make sure this div’s width and height is equal to the shrunk containing image? So that the next element with text- “Test” is displayed right next to it. Thanks!

My div (highlighted with background yellow) is expanding horizontally i.e., it’s width is increasing. How can I make sure this div’s width and height is equal to the containing image? So that the next element with text- “Test” is displayed right next to it. Thanks!

Is there any way to force a certain number of items per row using flex box or any other way in CSS / tailwind, without stretching the item’s width?

I want to create a carousel of identically sized images using Tailwind CSS. I want to have 5 images next to each other that the viewer will be able to scroll left and right to see the images. When the images were imported without Flex, they fit the max-width that i’ve set beforehand. however, after implementing Flex, the images did become side by side, but their width shrink.

I have a section element that has its min-height set to 100%, but its not taking up any space.
The parent (main) clearly has a height of 525px.