Padding Left and Right with text

In the below CSS class, Even when I have not entered any padding, it shows left and right padding around the text. Can someone please explain this behavior.

.injected-text {
margin-bottom: -25px;
text-align: center;

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;

.yellow-box {
background-color: yellow;
padding: 10px;

.red-box {
background-color: crimson;
color: #fff;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;

.blue-box {
background-color: blue;
color: #fff;
/* padding: 40px 20px 20px 40px; */


I believe that the width of header elements is 100%.

Can you show the rest of the css.

I am not too sure which box you are referring to. The red one?

There isn’t any padding on it. The .blue-box element is a <h5> which is a block-level element and will span the width of it’s parent container. It also has some default top/bottom margin. The reason why it isn’t spanning all the way to the edge is the 10px padding on the parent container .yellow-box.

The challenge (I assume)

Your image


I am talking about the blue box. For some reason output picture is not showing. I am going to try to add the output picture.