Inline editing and CSS problem? H1 tags don't look the same...

I am using the inline editing in version 4.1 which is working great.

It looks though as if the CSS is not being obeyed when in inlineEditing mode. My <H1> tag doesn't look the same when in inline editing mode and when not.

My HTML (before inline activation):

<h1>
<div class="editable" contenteditable="true" id="inline-COVER_SHEET-TITLE" style="position: relative;">Acetaminophen (paracetamol) for the common cold in adults</div>
</h1>

My HTML when inline is active:

<h1>
<div class="editable cke_editable cke_editable_inline cke_contents_ltr" contenteditable="true" id="inline-COVER_SHEET-TITLE" style="position: relative;" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, inline-COVER_SHEET-TITLE" title="Rich Text Editor, inline-COVER_SHEET-TITLE" aria-describedby="cke_151"><p>Acetaminophen (paracetamol) for the common cold in adults</p></div>
</h1>

See the following two attached screen shots of how the title text changes size - before and after inline activation... The text uses smaller font size for H1 when in inline mode than when displaying it "normally"...?