[Jellby]

Originally Posted by RbnJrg

That is because your roman number is too large. You can fix that by setting a higher "width" to the "text" class and adjusting left and right margins (see the Tex's setting). And your web browser seems not to have a white background.

I have a non-white background on purpose (easier on the eyes, helps spotting things that have a background and shouldn't ). And yes, I know the heading placement can be fixed, I just wanted to show that it can go wrong easily.

As long as we are relying on white background, wouldn't something like this work?

h2 {
   border-bottom: 3px solid;
   margin-top: -0.5em;
   margin-bottom: 0.5em;
   font-size: 1.4em;
   text-align: center;
}  

.text {
   position: relative;
   top: 0.7em;
   padding: 0 0.2em;
   background: white !important;
}