Add margin around code elements in callout title

[ErinBecker]

Addresses https://github.com/carpentries/sandpaper/issues/562 and https://github.com/carpentries/lesson-development-training/issues/346

This is a perhaps inelegant solution, and should probably be temporary. I've introduced a margin around code elements included in callout titles (examples below). The problem is that margin isn't text, and so doesn't retain the text styling (in this case underlining), making these callout titles have breaks in their underlines.

@froggleston and I also investigated adding :before and :after elements, each including a space character. This doesn't work well in cases where code elements are at the start and/or end of a title.

A more elegant solution would be to convert code elements within callouts to non-code elements and apply something like Courier to those elements. Or to selectively apply :before and :after elements depending on the position of a code element within the title. Both of these solutions would need to be done in sandpaper{} rather than varnish{} as they involve changing the xml representation of these elements.

As a temporary solution, this PR would improve readability, while losing some consistency in callout title formatting.

[ErinBecker]

@froggleston has proposed an alternative solution at https://github.com/carpentries/sandpaper/pull/587

[froggleston]

Closing this PR in favour of https://github.com/carpentries/sandpaper/pull/587