Why does applying page element style remove class

Question

We've set up a page in Office 365 that has the following in the HTML for the page (not the master page)

<div class="cont">
    <div class="row">
        <div class="some-random-other-class">
            <p>hello</p>
            <p>This thing</p>
        </div>
    </div>
</div>

Now, the trouble is that when I apply a Page Element style from the style menu to an element inside the row div (e.g. the "This thing" paragraph in the example above):

It wipes out some of my classes:

<div>
    <div>
        <div class="some-random-other-class">
            <p>hello</p>
            <h1>This thing</h1>
        </div>
    </div>
</div>

I'm struggling to understand why it does this - has anyone else run into this before? Is there some reason behind this, or have I uncovered a bug in the editor?

Answer 1

This is a bit tricky. There are some issues with the style menus. Basically, when it need to apply a style, it changes the vicinity as well. One thing you can do is get the class some-random-other-class and apply the parent div the 'row class' style as it describes here.

Then take the parent of row class and assign cont class style there.

Another good old way is entering the header 1 tag manually.