I like the background image, very good pattern.
Layout is working and good for desktop, but not for mobile! it’s broken. check:
Check that kind of too much space after the image, same about the image goes off the bound.
I suggest, for mobile let the main container fit the screen. In mobile space is gold. You should utilize every space of screen, and avoid wasting. it doesn’t mean let elements go so tight and make mess, no spacing between elements are required too.
I just checked if you remove that margin: 5% 10% 5% 10%; of your #grid rule, could help you to utilize more space.
Fix the space after image also.
Same for the text content, and two column like layout. Again 2 column like layout works for desktop, but it might not be good for mobile. Because text/page will be hard to read. Try to make it 1 column when it’s for mobile.
Try to use a very simple layout which works in heart, you may check this article comes with a responsive 2-column(for desktop), 1 column(for mobile) layout.
I also suggest you use a lighter background colour, a transparent white could work too.
Monospaced fonts (like the font you used for title “A Bountiful Life”) are good for source/code contents. It’s not critical, but I think using serif, or sans-serif is better.
Like to see some updates with some fixed layout soon.
Keep goin on great work, be patient, no rush and do the job pro and great.
Happy programming.