CSS Style and HTML PRE tag

I have been puzzled by my recent posts with source codes. I realized that the horizontal scroll bar does not appear in my source code blocks. The only thing I changed was to change the background color from white to black. I have not figured it out why until today.

The technique I used in my Blogger CSS is to define a class with this attribute:

white-space: nowrap


This should be able to let text in a block (div) auto flow horizontally. Today, I examined my previous posts and recent posts, and find nothing wrong with my updated CSS. My div class have the attribute. After looking at context of my code blocks. I saw that I use pre HTML tag to around my codes. In Safari's inspector, the attribute has been overwritten:

white-space: pre;

That's it! Then I tried to bring my white-space back to nowrap like this:

.nowrap > pre:first-child { ## class nowrap then next first child pre selector
 white-space: nowrap ## no wrap }

This resolves the issue, however, all the codes are in one line. The line breaks within pre blocks are all ignored. Actually, pre HTML tag means to preserve all the format of text within the block. It seems I cannot resolve the issue with both white-space as nowrap with pre HTML tag.

The solution is to add line break tags <br /> within codes and not using pre HTML tag.