[CBSA]

Well, I don't see any problems with the CSS code:

/* ----------------- code ----------------- */

pre {
white-space: pre-wrap;

margin: 25px 0 25px 20px;
font-size: 85%;
display: block;
-webkit-hyphens: none;
hyphens: none;
adobe-hyphenate: none;
overflow-wrap: break-word;
}

div.note pre.programlisting, div.tip pre.programlisting,
div.warning pre.programlisting, div.caution pre.programlisting,
div.important pre.programlisting {
margin-bottom: 0px;
}

code {

-webkit-hyphens: none;
hyphens: none;
adobe-hyphenate: none;
overflow-wrap: break-word;
}

code strong em,
code em strong,
pre em strong,
pre strong em,
strong code em code,
em code strong code,
span.bolditalic code { /* yes, all of these variations are needed */
font-weight: bold;
font-style: italic;

}

code em,
em code,
pre em,
em.replaceable {

font-style: italic;
}

code strong, strong code, pre strong, strong.userinput {

font-weight: bold;
}

div[data-type="example"] {
margin: 10px 0 15px 0 !important;
}

div[data-type="example"] h1,
div[data-type="example"] h2,
div[data-type="example"] h3,
div[data-type="example"] h4,
div[data-type="example"] h5,
div[data-type="example"] h6 {
font-style: italic;
font-weight: normal;

text-align: left !important;
text-transform: none !important;
margin: 10px 0 5px 0 !important;
border-bottom: 1px solid #000;
}

li pre.example {
padding: 10px 0 !important;
}

div[data-type="example"] pre[data-type="programlisting"], div[data-type="example"] pre[data-type="screen"] { margin: 0; }

span.gray { /* Added for DOM Enlightenment 9781449342845 */

}

But I still believe that you spotted the source of the problem correctly.