To Improve One Flexbox HTML Page

Hello

Engaged in learning Flexbox using Udemy courses.
Needed to create one page two columns full article to the left photos with complementary text to the right.

The page needs adjustments so that it has a good fit using Flexbox and styles.

The text needs to be improved upon. I don't know how best to create that style -though I have made a few attempts to work with textual styling.

I am working on two paths :

\public_html\meherbabaarchives\babalist\list_u
\public_html\meherbabaarchives\images\Baba Screens\upasnifin\upasni00_0003.jpg

The first instance when I did a FTP upload the page look as a draft as expected; text to the left: photo to the right.
As I continued to work with this page after uploading the revised drafts the photo was no longer visible. 
In Dreamweaver I use Properties. Browse to source. Photo is visible. Upload via FTP photos is no longer visible.

The issue is with the photo. In Dreamweaver the photo is there - with the src:
 <div class="image-box">    <p><img src="../../../meherbabaarchives/images/Baba Screens/upasnifin/upasni00_0003.jpg" alt="Sadguru Upasni Meheraj" width="629" height="864">
    </p>and on the 
Thus the issues with img src is apparent all to do with syntax. The other example is the background. Again the url is incorrect. How to I adjust the url so that the background will appear. As in the example:
background: url(file:///E|/Meher%20Baba%20Library%20Old/public_html/images/3fade_bl_.jpg);

Using Flexbox <style> </style> how do I enhance the NAV elements so that the appearance is improved? 
Here is the work in progress:

https://www.meherbabalibrary.org/babalist/list_u/shakti.html

Thanks for any comments