Problem
I am creating an image gallery using flexbox layout.
I want bigger/proper width for images displaying in flex box layout.
It is getting shrunk up and I cannot understand why. I would like to increase the width of elements but I cannot increase the width of it.
I want a bigger width for each flex child.
I am new to web development.
.bowl_images { display: flex; max-width: 95%; width: 95%; margin: auto; background-color: #052F1A; gap: 10px;}.bowl_images_section_1 { display: flex; background-image: url(./images/piece-1.jpg); background-size: contain; width: 100%; height: 400px; background-position: 0% 0%; background-size: 100% 100%;}.bowl_images p { display: flex; font-size: 12px; background-color: #FF72B5; color: #052F1A; padding: 3px; margin: auto; border-radius: 3px; text-wrap: wrap;}<div class="bowl_images"><div class="bowl_images_section_1"><p>Original Pieces</p></div><div class="bowl_images_section_1"><p>Original Pieces</p></div><div class="bowl_images_section_1"><p>Original Pieces</p></div><div class="bowl_images_section_1"><p>Original Pieces</p></div><div class="bowl_images_section_1"><p>Original Pieces</p></div><div class="bowl_images_section_1"><p>Original Pieces</p></div><div class="bowl_images_section_1"><p>Original Pieces</p></div><div class="bowl_images_section_1"><p>Original Pieces</p></div><div class="bowl_images_section_1"><p>Original Pieces</p></div><div class="bowl_images_section_1"><p>Original Pieces</p></div><div class="bowl_images_section_1"><p>Original Pieces</p></div><div class="bowl_images_section_1"><p>Original Pieces</p></div></div>