I am very new to web design - I appreciate the feedback! I changed it to a serif font (Merriweather) and increased the margins for the browser version. Is this more readable?

It's very difficult to read right now in Firefox mobile. Screenshot here https://ibb.co/x5xsXpB

Per the sibling commits, you don't want to use "margin" to control width. Use margin to control spacing between elements / the edge of the screen. What you want here is to put "max-width" on the content.

Specifically I'd suggest:

* Change "margin" on the <p> tags to "1.5rem 0"

* Change "margin" on .blog-page to "1.5rem auto" to keep the grey background centered based on width

* Add "max-width: 800px" (or whatever) to .blog-page

Not really on mobile. The margins are too large. Screenshot from mobile Chrome: https://imgur.com/a/q4oa7aO