[JSWolf]

[QUOTE=RbnJrg;4045768]I posted my solution in order that it works everywhere. What you want, it can be achieved with the following code:

1. In your .xhtml file:

<div class="heading">
  <h1 class="block">CHAPTER 1</h1>
</div>

You don't need the excess <div>. Excess code is not a good idea. The style for the h1 class should be chapter.

<h1 class="chapter">CHAPTER 1</h1>

]2. In your .css file:

.heading {
     text-align: center;
}

h1 {
    display: inline;
    font-size: 1.1em;
    font-family: sans-serif;
    margin: 1em auto;
}

.block {
    display: inline-block;
    background: teal;
    color: white;
    padding: 0.25em 1em;
}

The CSS code should be more like...

.chapter {
  font-size: large;
  font-weight: bold;
  font-family: sans-serif;
  margin-top: 1em;
  margin-bottom: 1em;
}

I've managed to cut down a significant portion of code and it does the very same thing. The idea is to keep it simple. The extra code is not simple.