My CodePen looks considerably different from the version I’m viewing in my Chrome browser. The main difference appears to be the margins, which are much smaller (and the margin-top: 2em set for the body is nonexistent).
I don’t have Bootstrap or anything linked via CodePen (only at the top of my HTML, which you can see in the CodePen). What could be causing this?
For comparison, here’s what it looks like when opening the HTML file on my browser:
I think what is happening is that BS is overriding your body margin.
In your original file, if I can reconstruct it from what I see here, you loaded your JS first and then your CSS. First of all, many people advocate the opposite - load CSS in the head and JS at the bottom of the body. Regardless, I think CP is loading your CSS, then your JS. There may also be a specificity issue.
In general, I think it’s a mistake to write something locally and then port it to CP. CP has it’s own way of doing things. For example, everything outside of the body tags should be handled in the CP headings - you don’t even need the body tags. It should just be content in the HTML pane.
If I load the BS CSS through CP, it seems to work fine - at least your margin-top returns.
Fixed it by linking the JS scripts at the end of the body, linking the Google web font and Bootstrap 4 stylesheets through CodePen, and removing the rest of the header content as well as the body tags as suggested. Thank you!
