Problems with CSS and Strange CodePen Results
Briefly

The user is experiencing inconsistencies between visual elements on a web page when viewed in Chrome versus CodePen. In Chrome, images appear correctly, but headings (h1 and h2) display smaller than expected, affecting their proportion to images and accompanying page numbering text. The issue appears linked to CSS definitions, particularly concerning font usage and spacing. Additionally, the user notes a difference in the application of styles like page-break and font choices that do not behave consistently across platforms. Both environments utilize the same HTML/CSS code, suggesting external influences may be at play.
My browser displays images as I expect, but the h1 and h2 headings do not. They appear much smaller than I believe they should.
The page numbering text looks small in relation to the images but is proportional to the h1 and h2 headings.
I can't find the issue causing discrepancies in my CSS code, even after comparing it to the CodePen display.
The .scrapbook-frame CSS rule displaying attributes varies between CodePen and my Chrome browser.
Read at SitePoint Forums | Web Development & Design Community
[
|
]