Currently, I am on a journey to become a Front End Developer through Udacity. As part of my learning process, I have a project that needs to be submitted. Unfortunately, I encountered some issues that I couldn't resolve on my own. Specifically, I'm facing challenges with aligning images and URLs within divs properly. I attempted to find a solution by visiting this website , as it provided various methods for aligning blocks. However, none of the suggested solutions worked for me.
<div class="row">
<div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
<div class="col-4"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
<div class="col-4 end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
</div>
The challenge lies in aligning the first image to the left, the second to the center, and the third to the right. While I could resort to using margins and paddings in HTML to achieve this alignment, my goal is to make it work seamlessly with responsive design.
<div class="row">
<div class="col-4">
<a href="https://github.com/udacity/Appify/">https://github.com/udacity/Appify/</a>
</div>
<div class="col-4">
<a href="https://github.com/udacity/Sunflower/">https://github.com/udacity/Sunflower/</a>
</div>
<div class="col-4">
<a href="https://github.com/udacity/Bokeh">https://github.com/udacity/Bokeh/</a>
</div>
</div>
In addition, the URLs located under the pictures are not lining up as intended, regardless of what methods I try.
You can view a screenshot of my webpage here:
P.S. This marks my inaugural post on Stack Overflow. Thanks in advance!