Here is a 1 column Grid page with Pre Code so you can display the html and CSS code

Home

Question 1: How to view CSS code and special characters in a webpage?
To display css code you have to add the following symbols.:

The fix is here:

Use pre code to display the HTML & CSS code in a web page to others.
Use HTML Formatter to indent the code.
W3 Schools - HTML Character Entities

Question 2: How to fix?
The text escapes the divs instead wrapping around to the next line.


Special Characters
How to display div id="header" in a webpage to use as an example. Use the symbols seen below after the Less caret and before the Greater caret.
<div id="header"> </div>
Less < &lt; Greater > &gt;
Other Special Characters
ampersand   & &nbsp;   non-breaking space
misc misc 
    
#article { grid-area: article;
h1 { color: black;
p { color: black;
font-size: 110%;
&nbsp;  non-breaking space

<div id="header">      </div>
    

    
#article { grid-area: article;
h1 { color: black;
p { color: black;
font-size: 110%;

<div id="header">      </div>

Question: How to fix?
The text escapes the divs instead wrapping around to the next line.

The fix is to add:
width: 70%;
white-space: pre-wrap;
word-wrap: break-word;

Screenshot: What you see when I do not add a space between caret and div and use no special characters. 


    
#article { grid-area: article;
h1 { color: black;
p { color: black;
font-size: 110%;
&nbsp;  non-breaking space

<div id="header">      </div>