Aligning three columns towards right side - html

Question

I am trying to have three columns aligned so that they are all the right side. Here is what I have so far: https://prnt.sc/o5284n
And here is how this is supposed to work: https://prnt.sc/o528y3
I have managed to solve this problem by applying margin to the sides of the images, but this gets really messed as the web page gets smaller.
I have looked into many other option such as float and column gap but this doesn't work for me in this case
<section id="bottom">
<img src="Appify.png" alt="app" width="310" height="200" class="pad">
<p class="twenty_f">APPIFY</p>
<img src="sunflower.jpeg" alt="flower" width="310" height="200" class="pad">
<p class="twenty_f">SUNFLOWER</p>
<img src="bokeh.jpeg" alt="bokeh" width="310" height="200" class="pad">
<p class="twenty_f">BOKEH</p>
</section>

Answer 1

I think what you are looking for flexbox handles perfectly.
That being said. The problem you are running into is that you don't have a max-width on your bottom-section.
Try adding:
section#bottom {
max-width: 1000px;
text-align: center;
}
This will allow your items to be closer together without stretching out too far.
What I suggest though is using the flexbox method. Another thing is you should wrap your images and related text into a div that contains them together. It gives you better responsive control in the end.
I have given you an example that I quickly did on codepen.
Link to example

Answer 2

Why don't go with flexbox approach. Try this:
#bottom {
display: flex;
justify-content: space-around;
}
#bottom div {
text-align: center;
margin-right: 10px;
}
<section id="bottom">
<div>
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="app" width="310" height="200" class="pad">
<p class="twenty_f">APPIFY</p>
</div>
<div>
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="flower" width="310" height="200" class="pad">
<p class="twenty_f">SUNFLOWER</p>
</div>
<div>
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="bokeh" width="310" height="200" class="pad">
<p class="twenty_f">BOKEH</p>
</div>
</section>
Refer: https://www.w3schools.com/css/css3_flexbox.asp
Hope it helps. Cheers!