Photo Gallery Misbehaving

[Ezad]

Hello
I needed a photo gallery on my web page to promote content of bookstores past.
I used this gallery from https://www.w3schools.com/css/css_image_gallery.asp.

Here is the link to the web page that I am having difficult creating a verticle alingment.
http://meherbabalibrary.org/babalist/list_l/list_l_life-circular-30.html
Where the photos end (after the photo gallery) the text and links should drop down. I attach a web page showing how material is arranged from top to bottom.

This page with the image gallery the content rearranges to the right side of the photo gallery.

I fiddled with creating divs, (below the photo gallery) with paragraphs, with Main and Section. That fiddling did not help to prevent the shuffle of material from below the photo gallery from adjusting to the right of the gallery.

How do I keep the photo gallery stationed in its div area (as the photo gallery) and text and link content in its own space below?
Let me know what to do.
I am Stuck.
Thanks!!

[Nancy OShea]

It's a basic but not terrific gallery built with floats.  And floats must be cleared.  Did you add the "clearfix" div to your page?  See below.

https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive

[Nancy OShea]

You also have an astounding number of code errors that need attention. 

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmeherbabalibrary.org%2Fbabalist%2Flist_l%2F...

You should not combine HTML5 with much older XHTML 1 code.  Use all HTML5 as that's the current web standard. 

Maintain <tag> pairs throughout the document.  Orphaned tags cause misalignments.