Making h1 elements inline

[mil-ad]

I'm trying to change the background colour for h1 elements in particular and noticed that h1 tags span the whole line.

I'm only interested in changing the background of the text part so I thought I could add this to my css:

section.my_custom_class {
    h1 {
        display: inline;
        background: red;
    }
}

but h1 tags still span the whole line. Am I doing something wrong?

[yhatt]

CSS cannot nest selectors so you have to style like this:

section.my_custom_class h1 {
    display: inline;
    background: red;
}

It would work if the section element was a block container, but it may not yet work in some Marp themes because they are using section as a flex container (required for vertical centering) and its children are stretching to fit the container. In this case, try using align-self: flex-start; instead of display: inline;.

section.my_custom_class h1 {
    align-self: flex-start;
    background: red;
}

[mil-ad]

👌👌👌