There were a couple of changes I had to make in the CSS when I translated my code from my local program on my mac to CodePen.io. For instance, as explained, by some others in my previous post, I changed every style from a “px” based one to “%” based one to avoid clumping when browser is resized, or when the webpage is loaded on a small screen. But, when I translated this to codepen.io I had to change the values again because the the top bar in codepen.io messes with the style. So I sorted this out by experimenting.
However, the font-family - Helvetica, Times (oh by the way I know Helvetica and Times are two separate fonts) do not work in Codepen.io. On my mac, with the Helvetica font the title looks so pretty. But, on codepen.io I had to change to Monospace and the Title looks so repugnant.
(Here is my code: https://codepen.io/psomdeb25/pen/bajYvd)
Also, this is a screenshot of how it looks when I run it locally on my Mac.